Vuejsのv-forでtable内に作ったinputタグのvalueをオブジェクトの配列として取得したい。

前提・実現したいこと

初学者です。
Vuejsにて、v-forで作成したtableにおいて、以下のようなコードで<td>タグの中に
<input>要素を入れて、v-modelにてオブジェクトとして保存したいと考えています。
内容は、単純に、何月何日に、何時～何時まで、どんなことをしたという
表形式の記録をDBに保存しようとしています。保存する際に、
[{...},{...},{...},{...}・・・・]とできればよいのでは？と考えています。
実際の保存方法がこの形式が正しいのかも不安に思っておりますが・・・・・

発生している問題・エラーメッセージ

dataオプションの中でv-modelと連携しているため、table のinputのvalue がすべて
同じになってしまうことは、理解したのですが、v-forで配列として要素を作成して
回しているため、この配列にそれぞれのオブジェクトを登録できればよさそうな気がしていますが
どのようにすれば実現できるかわかっていません。
特にエラーもでていません。

該当のソースコード

TimeData.vue
1    <div>
2      <table class="table">
3        <thead>
4          <tr>
5            <th>番号</th>
6            <th>日付</th>
7            <th>開始時間</th>
8            <th>終了時間</th>
9            <th>備考</th>
10          </tr>
11        </thead>
12        <tbody>
13          <tr v-for="item in route_input" :key="item" :name="item">
14            <td>{{ item  }}</td>
15            <td><input type="date" v-model="setOverTime.overTimeDate" /></td>
16            <td><input type="time" v-model="setOverTime.overTimeStart" /></td>
17            <td><input type="time" v-model="setOverTime.overTimeEnd" /></td>
18            <td><input type="text" v-model="setOverTime.overTimeCom" /></td>
19          </tr>
20        </tbody>
21      </table>
22　　　<button @click='test'>test</button>
23   </div>
24

script
1const data_array = [1, 2, 3, 4, 5];
2export default {
3  data() {
4    return {
5      route_input: data_array,
6      setOverTime: {
7        overTimeDate: "",
8        overTimeStart: "",
9        overTimeEnd: "",
10        overTimeCom: "",
11      },
12    };
13  },
14 methods:{
15   test(){
16   console.log(setOverTime);
17   }
18 },
19}

試したこと

computed オプションや、子コンポーネント化して親に読み込む等も
試してみようと思いましたが、解決の方向性がわからず、うまく試せていません。
ご回答よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

VS-CODEにて、ローカル開発を行っています。

行動規範の内容に同意します

回答1件

ベストアンサー

tableの各列の値が全て同じになってしまうのは、dataの同じオブジェクトを各列の要素に割り当ててしまっているためです。
ご認識の通りdataにオブジェクトの配列を用意し、各列の要素に異なるオブジェクトを割り当てればOKです。

dataにオブジェクトの配列を用意する

JavaScript
1data() {
2    return {
3      // ↓こちらは不要です
4      //route_input: data_array,
5      // tableの行数分オブジェクトを用意する
6      setOverTime: [{
7        overTimeDate: "",
8        overTimeStart: "",
9        overTimeEnd: "",
10        overTimeCom: "",
11      },
12      {
13        overTimeDate: "",
14        overTimeStart: "",
15        overTimeEnd: "",
16        overTimeCom: "",
17      },
18      {
19        overTimeDate: "",
20        overTimeStart: "",
21        overTimeEnd: "",
22        overTimeCom: "",
23      },
24      {
25        overTimeDate: "",
26        overTimeStart: "",
27        overTimeEnd: "",
28        overTimeCom: "",
29      },
30      {
31        overTimeDate: "",
32        overTimeStart: "",
33        overTimeEnd: "",
34        overTimeCom: "",
35      }
36      ],
37    };
38  },

tableの各項目にdataのオブジェクトを割り当てる

HTML
1<!-- 
2ループ対象をroute_inputから、オブジェクトの配列そのもの(setOverTime)に変更
3配列の添え字を取得するため、 item => (item, index) に修正(indexには添え字(0, 1, 2...)が入る) 
4-->
5          <tr v-for="(item, index) in setOverTime" :key="index" :name="index">
6            <td>{{ index + 1  }}</td>
7<!-- 各要素にdataの個別のオブジェクトを割り当てるため、 setOverTime.XXX => item.XXX に修正 -->
8            <td><input type="date" v-model="item.overTimeDate" /></td>
9            <td><input type="time" v-model="item.overTimeStart" /></td>
10            <td><input type="time" v-model="item.overTimeEnd" /></td>
11            <td><input type="text" v-model="item.overTimeCom" /></td>
12          </tr>

参考

次のページで動作を確認頂けます。
https://jsfiddle.net/mdbrjpvc/1/

投稿2021/05/28 13:48

編集2021/05/28 14:33

akkie

総合スコア79

latte217

2021/05/29 01:30

akkie 様　ご回答いただきましてありがとうございます。　動作確認させていただき、希望通りの動きになることを確認しました！　data の中に route_input: data_array,　を設けた理由としては、　　 <tr v-for="item in route_input" :key="item" :name="item"> 　のitem数を、「固定」ではなく「動的」に、増やしたりしたかったためなのです。　例えばmethods に　data_array+1 などで「行」の追加を考えていました。　その場合、現状のdata 中のオブジェクトが固定数では問題となるため、同時にこのオブジェクトも　動的に増やせないか？と思っています。　大変申し訳ございませんが、こちらも何か方法があれば教えていただければありがたいです。　よろしくお願いいたします。

akkie

2021/05/29 11:58 編集

データの個数を変更したいということですね。下記の処理をmethodsに追加して、呼び出せばOKです。 methods:{ // 他のメソッドは省略 // データを追加する addData() { this.setOverTime.push( { overTimeDate: "", overTimeStart: "", overTimeEnd: "", overTimeCom: "", } ) } } https://jsfiddle.net/ek4qndc3/1/

latte217

2021/05/30 23:12

akkie様　ありがとうございました！　なるほど、よくわかりました。　jsfiddle でのサンプル提供まで行っていただきありがとうございます。　　今後ともよろしくお願いいたします。

行動規範の内容に同意します