0
我问的问题关于添加/在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>
伯特,非常感谢这样详细的解释和演示!因为我是vue.js的新手,所以从组件外部传递数据的原因是我希望能够有更好的方式将此选择组件作为模板使用,因为这些组件的唯一区别是不同的选择列表。 – user1830108
@ user1830108通常,当您想要自定义组件时,您会以道具形式传递数据。在这种情况下,您可以将选项作为道具传入。 – Bert