vue.jsとelement-uiのdatepickerを使用し下記のようなファイルを作成いたしました。
→element-ui datepicker
①このように作成した日付の表なのですが、日付のinput textの属性にnameがないのですが、これは、どのようにサーバー側で値を取得するのでしょうか。
中国語なので、詳細は分かりませんが下記のリンクような状態です。
リンク
②今現在、listのjsonをv-forで回しているのですが、この場合、日付のtd属性などにclassやidをidx属性を付与して作成する場合、どのように記載すればよいのでしょうか。
html
1 <table> 2 <tr> 3 <th colspan="1">No.</th> 4 <th colspan="1">FROM</th> 5 <th colspan="1">TO</th> 6 <th colspan="1">種別</th> 7 </tr> 8 9 <tr v-for="(val, idx) in list"> 10 <td colspan="1">1</td> 11 <td colspan="1"><el-date-picker name="from_date" type="date" placeholder="日付の選択" :value="val.from_date" v-model="val.from_date"></el-date-picker></td> 12 <td colspan="1"><el-date-picker name="to_date" type="date" placeholder="日付の選択" :value="val.to_date" v-model="val.to_date"></el-date-picker></td> 13 <td colspan="1"> 14 <select name="Section[]" class="form-control input-sm" v-model="val.selected"> 15 <option v-for="option in options" v-bind:value="option.value"> 16 {{ option.text }} 17 </select> 18 </td> 19 </tr> 20 21 </table>
js
1<script> 2 new Vue({ 3 el: '.test', 4 selected: 1, 5 data: { 6 list: [ 7 { from_date: '2011-01-06', to_date: '2015-02-03', selected: 1 }, 8 { from_date: '2012-02-07', to_date: '2016-03-04', selected: 2 }, 9 { from_date: '2013-03-08', to_date: '2017-04-05', selected: 3 }, 10 { from_date: '2014-04-09', to_date: '2018-05-06', selected: 4 }, 11 ], 12 13 }, 14 methods: { 15 16 }, 17 } 18 }); 19</script> 20
このようは場合、jsonをhiddenで隠してpostするのが一般的なのでしょうか?
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー