回答編集履歴
1
ループ処理専用の配列を用意するのではなく、オブジェクトの配列を使うように変更しました
test
CHANGED
|
@@ -14,9 +14,11 @@
|
|
|
14
14
|
|
|
15
15
|
return {
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
// ↓こちらは不要です
|
|
18
18
|
|
|
19
|
+
//route_input: data_array,
|
|
20
|
+
|
|
19
|
-
//
|
|
21
|
+
// tableの行数分オブジェクトを用意する
|
|
20
22
|
|
|
21
23
|
setOverTime: [{
|
|
22
24
|
|
|
@@ -94,21 +96,27 @@
|
|
|
94
96
|
|
|
95
97
|
```HTML
|
|
96
98
|
|
|
97
|
-
<!--
|
|
99
|
+
<!--
|
|
98
100
|
|
|
99
|
-
|
|
101
|
+
ループ対象をroute_inputから、オブジェクトの配列そのもの(setOverTime)に変更
|
|
100
102
|
|
|
101
|
-
|
|
103
|
+
配列の添え字を取得するため、 item => (item, index) に修正(indexには添え字(0, 1, 2...)が入る)
|
|
102
104
|
|
|
103
|
-
|
|
105
|
+
-->
|
|
104
106
|
|
|
105
|
-
|
|
107
|
+
<tr v-for="(item, index) in setOverTime" :key="index" :name="index">
|
|
106
108
|
|
|
107
|
-
<td>
|
|
109
|
+
<td>{{ index + 1 }}</td>
|
|
108
110
|
|
|
109
|
-
|
|
111
|
+
<!-- 各要素にdataの個別のオブジェクトを割り当てるため、 setOverTime.XXX => item.XXX に修正 -->
|
|
110
112
|
|
|
113
|
+
<td><input type="date" v-model="item.overTimeDate" /></td>
|
|
114
|
+
|
|
115
|
+
<td><input type="time" v-model="item.overTimeStart" /></td>
|
|
116
|
+
|
|
117
|
+
<td><input type="time" v-model="item.overTimeEnd" /></td>
|
|
118
|
+
|
|
111
|
-
<td><input type="text" v-model="
|
|
119
|
+
<td><input type="text" v-model="item.overTimeCom" /></td>
|
|
112
120
|
|
|
113
121
|
</tr>
|
|
114
122
|
|
|
@@ -120,4 +128,4 @@
|
|
|
120
128
|
|
|
121
129
|
次のページで動作を確認頂けます。
|
|
122
130
|
|
|
123
|
-
[https://jsfiddle.net/
|
|
131
|
+
[https://jsfiddle.net/mdbrjpvc/1/](https://jsfiddle.net/mdbrjpvc/1/)
|