Vue 2 中管理数组：深入解析添加与移除元素

vue.js

2024-03-21 14:19:13

在 Vue 2 中管理数组：添加和移除元素

简介

在 Vue.js 应用程序中，管理数组是常见任务。有时，需要在组件中添加或移除数组中的元素。为了实现这一目的，必须遵循特定步骤，本文将详细介绍这些步骤，解决相关问题，并提供完整代码示例。

添加元素到数组

问题： 如何向数组中添加元素？

解决方案：

确定要添加到数组中的元素。
使用 push() 方法将元素添加到数组。

示例代码：

this.rows.push({ code: 'New Item', description: '', unitprice: '' });

从数组中移除元素

问题： 如何从数组中移除元素？

解决方案：

确定要从数组中移除元素的索引。
使用 splice() 方法从数组中移除元素。

示例代码：

this.rows.splice(index, 1);

解决问题：

在提供的代码中，存在两个主要问题：

向 rows 数组添加元素时，应该添加一个对象，而不是空字符串。
splice() 方法正在移除数组中的最后一个元素，而不是指定索引处的元素。这是因为 splice() 方法的第二个参数指定要从数组中移除的元素数量，而不是索引。

更正后的代码：

this.rows.push({ code: 'New Item', description: '', unitprice: '' });
this.rows.splice(index, 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({ code: 'New Item', description: '', unitprice: '' });
    },
    removeRow(index){
       this.rows.splice(index, 1);
    }
}
})