如何在 Vue 2 组件的数组中添加和删除项目

Question

我制作了一个组件“my-item”，它包含三个元素：一个下拉列表（由“itemList”填充）和两个从下拉列表填充的输入框。 该组件被视为一行。

我正在尝试一次添加和删除一行，但有两件事我不确定。 (1) 将什么添加到 rows 数组？ (2) 为什么 this.rows.splice(index,1) 只删除最后一行？

https://jsbin.com/mugunum/edit?html,output

谢谢

<div id="app">
    <my-item v-for="(row, index) in rows"
         :itemdata="itemList"
          v-on:remove="removeRow(index)">
    </my-item>
<div>
    <button @click="addRow"> Add Row </button>
</div>
</div>

<template id="item-template">
<div>
    <select v-model="selected">
        <option v-for="item in itemdata"  :value="item">
           {{ item.code }}
        </option>
    </select>
    <input type="text" placeholder="Text" v-model="selected.description">
    <input type="text" placeholder="value" v-model="selected.unitprice">
    <button v-on:click= "remove"> X </button>
</div>
</template>

Vue.component('my-item', {
props: ['itemdata'],
template: '#item-template',
data: function () {
    return {
    selected: this.itemdata[0]
    }
},
methods: {
    remove() {
        this.$emit('remove');
    }
}
}),

new Vue({
el: "#app",
data: {
    rows: [],
    itemList: [
        { code: 'Select an Item', description: '', unitprice: ''},
        { code: 'One', description: 'Item A', unitprice: '10'},
        { code: 'Two', description: 'Item B', unitprice: '22'},
        { code: 'Three', description: 'Item C', unitprice: '56'}
    ]
},

methods: {
    addRow(){
       this.rows.push(''); // what to push unto the rows array?
    },
    removeRow(index){
       this.rows.splice(index,1); // why is this removing only the last row?
    }
}
})

Answer 1

你犯的错误很少：

1. 您需要在addRow方法的数组中添加适当的对象
2. 您可以在特定索引处使用splice 方法remove an element from an array。
3. 您需要将当前行作为 prop 传递给 my-item 组件，可以在其中进行修改。

你可以看到工作代码here。

addRow(){
   this.rows.push({description: '', unitprice: '' , code: ''}); // what to push unto the rows array?
},
removeRow(index){
   this. itemList.splice(index, 1)
}

Answer 2

您可以使用Array.push() 将元素附加到数组。

对于删除，最好将this.$delete(array, index) 用于反应对象。

Vue.delete( target, key ): 删除对象的属性。如果对象是反应性的，请确保删除触发视图更新。这主要是为了解决 Vue 无法检测到属性删除的限制，但您应该很少需要使用它。

https://vuejs.org/v2/api/#Vue-delete