Получить значение тега select в таблицах с динамическими строками в vue.js

Question

Я хочу установить значение тега select в данных VM.

<table id="vm" v-cloak>
  <thead>
    <tr>
      <th>Select</th><th>Operation</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, i) in rowData">
      <td>
        <select v-model="selected" @change="changeDate($event)">
          <option v-for="sItem in selectItems" :value="sItem.val">{{sItem.lbl}}</option>
        </select>
      </td>
      <td>
        <button @click="addRow(i)">+</button>
        <button @click="removeRow(i)">-</button>
      </td>
    </tr>
  </tbody>
</table>

Мой сценарий

// Select tag items
const SELECT_ITEMS = [
  {val:"1", lbl:"Val1"},
  {val:"2", lbl:"Val2"},
  {val:"3", lbl:"Val3"}
];

// my vm
new Vue({
  el: "#vm",
  data:{
    rowData:[{val:"1"},{val:"2"}],
    selected : '',
    selectItems : SELECT_ITEMS
  },
  methods:{
    // add new row
    addRow(i){
      let row = {
        val : this.selected,
      };
      this.rowData.splice(i, 0, row);
      this.val = '';
    },
    // remove current row
    removeRow(i){
      this.rowData.splice(i,1);
    },
    changeDate(e){
      // I want to set a value to item in rowData.
      console.log(e.target.value);
    }
  }
});

CodePen

Я не знаю, как установить выбранные данные в данные текущей строки rowData.

И, изменение одного меняет все предметы.

И я хочу добавить выбранный атрибут при загрузке.

Answer 1

Почему бы не использовать rowData in v-model?

Demo :

<tr v-for="(item, i) in rowData">
  <td>
    <select v-model="rowData[i].val" @change="changeDate($event)">
      <option v-for="sItem in selectItems" :value="sItem.val">{{sItem.lbl}}</option>
    </select>
  </td>
  <td>
    <button @click="addRow(i)">+</button>
    <button @click="removeRow(i)">-</button>
  </td>
</tr>

Answer 2

Ваши теги выбора связаны с одной и той же переменной. Если вы сделаете модель свойством элемента rowData, вы получите уникальные значения для каждой строки:

изменение: v-model="selected" до: v-model="item.value"

ручка: https://codepen.io/anon/pen/QPJqqR?editors=0001

новый шаблон:

<table id="vm" v-cloak>
  <thead>
    <tr>
      <th>Select</th><th>Operation</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, i) in rowData" :key="i">
      <td>
        <select v-model="item.value" @change="changeDate($event)">
          <option v-for="sItem in selectItems" :value="sItem.val">{{sItem.lbl}}</option>
        </select>
      </td>
      <td>
        <button @click="addRow(i)">+</button>
        <button @click="removeRow(i)">-</button>
      </td>
    </tr>
  </tbody>
</table>

В этом примере item.value - это просто опция, вы можете использовать любое имя свойства, которое вы предпочитаете, например item.rowName. Это просто должно быть свойство объекта item, созданного rowData.