title: Get select tag value in tables with dynamic rows in vue.js
body: <p>I want to set the value of select tag in VM data.</p>
  
  <pre><code>&lt;table id="vm" v-cloak&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Select&lt;/th&gt;&lt;th&gt;Operation&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr v-for="(item, i) in rowData"&gt;
        &lt;td&gt;
          &lt;select v-model="selected" @change="changeDate($event)"&gt;
            &lt;option v-for="sItem in selectItems" :value="sItem.val"&gt;{{sItem.lbl}}&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;button @click="addRow(i)"&gt;+&lt;/button&gt;
          &lt;button @click="removeRow(i)"&gt;-&lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My script</p>
  
  <pre><code>// 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);
      }
    }
  });
  </code></pre>
  
  <p><a href="https://codepen.io/yanchi4425/pen/oOQwLP?editors=1111" rel="nofollow noreferrer">CodePen</a></p>
  
  <p>I do not know how to set the selected data to the data of the current row of rowData.</p>
  
  <p>And, changing one changes all items.</p>
  
  <p>And, I want to add selected attribute at loaded.</p>