问题导致行选择覆盖

Question

我问了关于在how to use "v-for" for adding or removing a row with multiple components 中添加/删除行的问题

但是，我遇到了一个错误：当我添加一行时，第一行中的项目填充到第二行，当我更改第二行时，第一行也被覆盖，与第二行相同。

我一定做错了。

在.js中

 var data1={selected: null, items: ["A1","B1"]};
 Vue.component('comp1',{
       template: ` <select v-model="selected">
           <option disabled value="">Please select</option>
           <option v-for="item  in items" :value="item">{{item}}
            </option>
           </select>`,
      data:function(){
         return data1
         }         
     });

    var data2={selected: null, items: ["A2","B2"]};
    Vue.component('comp2',{
        template: ` <select v-model="selected">
                     <option disabled value="">Please select</option>
                     <option v-for="item in items" :value="item">{{item}}
            </option>
             </select>`,
           data:function(){
           return data2
            }          
          });




new Vue({
  el: '#app',
  data: {
    rows: []
  },
  computed:{
    newId(){
     return this.rows.length == 0 ? 1 : Math.max(...this.rows.map(r => r.id)) + 1
    }
  },
  methods: {
    addRow: function() {
      this.rows.push({id: this.newId });
    },
    removeRow: function(row) {
       this.rows.splice(this.rows.indexOf(row), 1)
    }
  },

});

在.html中

<div id="app">
  <div v-for="row in rows">
    <comp1></comp1>
    <comp2></comp2>

    <button @click="removeRow(row)">Remove Row</button>
  </div>
  <button @click="addRow">Add Row</button>
</div>

Answer 1

您需要添加密钥。

<div v-for="row in rows" :key="row.id">

而且你不应该在组件之间共享数据，所以将你的数据移动到组件中。

data: function() {
  return {
    selected: null,
    items: ["A1", "B1"]
  }
}

这是一个工作版本。

Vue.component('comp1', {
  template: ` <select v-model="selected">
           <option disabled value="">Please select</option>
           <option v-for="item  in items" :value="item">{{item}}
            </option>
           </select>`,
  data: function() {
    return {
      selected: null,
      items: ["A1", "B1"]
    }
  }
});

Vue.component('comp2', {
  template: ` <select v-model="selected">
                     <option disabled value="">Please select</option>
                     <option v-for="item in items" :value="item">{{item}}
            </option>
             </select>`,
  data: function() {
    return {
      selected: null,
      items: ["A2", "B2"]
    }
  }
});




new Vue({
  el: '#app',
  data: {
    rows: []
  },
  computed: {
    newId() {
      return this.rows.length == 0 ? 1 : Math.max(...this.rows.map(r => r.id)) + 1
    }
  },
  methods: {
    addRow: function() {
      this.rows.push({
        id: this.newId
      });
    },
    removeRow: function(row) {
      this.rows.splice(this.rows.indexOf(row), 1)
    }
  },

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <div v-for="row in rows" :key="row.id">
    <comp1></comp1>
    <comp2></comp2>

    <button @click="removeRow(row)">Remove Row</button>
  </div>
  <button @click="addRow">Add Row</button>
</div>

具体来说，您共享数据的方式是因为您是这样定义数据的：

var data1={selected: null, items: ["A1","B1"]};

并从组件中的数据函数返回该对象：

data:function(){
  return data1
}         

这意味着该组件的每个实例都在共享相同的数据。这不是您想要的组件。每个组件都应该有自己的数据副本。在这种情况下，无需在组件外部定义从数据函数返回的数据对象。