Arrays 如何在Vue 2中的组件中从阵列中添加和删除项

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

我试图一次添加和删除一行，但有两件事我不确定。 （1） 向行数组添加什么？ （2） 为什么.rows.splice（索引，1）只删除最后一行

谢谢

<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?
    }
}
})

添加行
{{item.code}}
X
Vue.组件（“我的项目”{
道具：['itemdata']，
模板：“#项目模板”，
数据：函数（）{
返回{
已选择：此.itemdata[0]
}
},
方法：{
删除（）{
此.$emit（'remove'）；
}
}
}),
新Vue({
el:“应用程序”，
数据：{
行：[]，
项目列表：[
{代码：'选择项目'，说明：''，单价：'}，
{代码：'1'，说明：'A项'，单价：'10'}，
{代码：'2'，说明：'B项'，单价：'22'}，
{代码：'3'，说明：'C项'，单价：'56'}
]
},
方法：{
addRow（）{
this.rows.push（“”）；//向rows数组中推送什么？
},
（索引）{
this.rows.splice（索引，1）；//为什么只删除最后一行？
}
}
})

您所犯的错误很少：

您需要在

addRow

方法中的数组中添加适当的对象

您可以使用

拼接

方法在特定索引处进行拼接

您需要将当前行作为道具传递给

my item

组件，在该组件中可以进行修改

您可以看到工作代码

---

可以使用

Array.push（）

将元素附加到数组中

对于删除，最好对被动对象使用

this.$delete（数组、索引）

Vue.delete（目标，键）

：删除对象上的属性。如果对象是被动的，请确保删除触发视图更新。这主要用于绕过Vue无法检测属性删除的限制，但您应该很少需要使用它

---

@Pyol7如果您没有在行中推送任何内容，您必须首先正确地修复添加行的问题，然后才能知道要删除的索引的差异。这就是问题所在。我不知道如何修复AddRow是否必须将行组件推送到行数组中？如果是，怎么做？@Pyol7检查并编辑答案。谢谢，它可以工作，但有很多重复。一定有更好的办法。我把它清理了一点，但仍然不满意。可能是重复的

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