v-forで作成したtableで、行ごとにキストボックスとプルダウンの編集が行えるようにしたい

前提・実現したいこと

v-forでtableを作成しており、tdにテキストボックスとプルダウンを置いています。
行ごとに、テキストボックスとプルダウンの編集が行えるようにしたいです。

発生している問題

テキストボックスに入力した内容と、プルダウンで選択した内容が、全ての行に反映されてしまします。

該当のソースコード

html
1<tbody>
2  <tr v-for="(content, index) in table" id="box">
3    <td>{{content.tag_name}}</td>
4    <td>
5      <input type="text" name="" placeholder="ー" v-model="countNum">
6    </td>
7    <td>
8      <select v-model="countOption">
9        <option v-for="option in countOptions" v-bind:value="option.value">
10          {{option.text}}
11        </option>
12      </select>
13    </td>
14  </tr>
15</tbody>

vue
1new Vue({
2            el: '#app',
3            data: {
4                countOption: '',
5                countOptions: [
6                    { text: 'ー', value: 'ー' },
7                    { text: 'AAA', value: 'AAA' },
8                    { text: 'BBB', value: 'BBB' },
9                    { text: 'CCC', value: 'CCC' }
10                ],
11                countNum: '',
12                table: [
13                    { 'tag_id': '1', 'tag_name': 'あああ'},
14                    { 'tag_id': '2', 'tag_name': 'いいい'},
15                    { 'tag_id': '3', 'tag_name': 'ううう'},
16                    { 'tag_id': '4', 'tag_name': 'えええ'}
17                ],
18            }

補足

Vue初心者で、質問の仕方もよくないかもしれません…
本来上記のような書き方をしたら、全ての行に反映されるのが普通なのでしょうか？

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

回答1件

ベストアンサー

v-modelで参照しているのが全て一つの値になっています。このままではどこを入力してもcountNumやcountOptionを変更することになるので全行が書き換わってしまいます。
以下は一例ですが、forで回しているデータにそれぞれ値の保存先を用意し、v-modelで参照することで解決できます。保持したい数だけVueのdataにも値を保存する場所を用意するようにしましょう。

html
1<div id="app">
2  <table>
3  <tbody>
4  <tr v-for="(content, index) in table" id="box">
5    <td>{{content.tag_name}}</td>
6    <td>
7      <input type="text" name="" placeholder="ー" v-model="content.text">
8    </td>
9    <td>
10      <select v-model="content.select">
11        <option v-for="option in countOptions" v-bind:value="option.value">
12          {{option.text}}
13        </option>
14      </select>
15    </td>
16  </tr>
17</tbody>
18</table>
19</div>

js
1new Vue({
2  el: '#app',
3  data: {
4    countOptions: [
5      { text: 'ー', value: 'ー' },
6      { text: 'AAA', value: 'AAA' },
7      { text: 'BBB', value: 'BBB' },
8      { text: 'CCC', value: 'CCC' }
9    ],
10    table: [
11      { tag_id: '1', tag_name: 'あああ', text: '', select: ''},
12      { tag_id: '2', tag_name: 'いいい', text: '', select: ''},
13      { tag_id: '3', tag_name: 'ううう', text: '', select: ''},
14      { tag_id: '4', tag_name: 'えええ', text: '', select: ''}
15    ],
16  }
17})