混合式Vue项目中如何实现数组的行添加与删除功能？

看起来你已经搭建了一个很棒的创意优先级排序Web应用，接下来咱们一步步实现元素的添加和删除功能，完全贴合你现有的混合式Vue开发方案：

一、实现元素添加功能 #

首先，咱们优化输入框的绑定方式（用Vue的v-model替代原生id绑定，更符合Vue的数据驱动理念），然后添加点击按钮并实现对应的方法：

1. 模板部分修改 #

把你现有的输入框和新增按钮整合到表格结构中：

<!-- 现有展示创意名称的行 -->
<tr v-for="(product, index) in products" :key="index">
  <td>{{ product.name }}</td>
  <td><button @click="deleteProduct(index)">删除</button></td>
</tr>
<!-- 添加新创意的行 -->
<tr>
  <td><input v-model="newProductName" placeholder="输入创意名称"/></td>
  <td><button @click="addProduct">添加创意</button></td>
</tr>

2. Vue实例部分配置 #

在你的Vue实例中，补充对应的数据和方法：

new Vue({
  el: '#app', // 替换成你的根元素选择器
  data: {
    products: [
      // 这里是你现有的创意数组数据，比如 { name: "创意1" }
    ],
    newProductName: '' // 绑定输入框的变量
  },
  methods: {
    addProduct() {
      // 先校验输入不为空
      if (this.newProductName.trim()) {
        // 往数组里添加新的创意对象
        this.products.push({ name: this.newProductName.trim() });
        // 清空输入框
        this.newProductName = '';
      }
    }
  }
});

二、实现元素删除功能 #

上面的模板里已经给每个列表项加了删除按钮，现在只需要在methods里补充删除方法：

methods: {
  // ... 保留上面的addProduct方法
  deleteProduct(index) {
    // 根据索引删除数组对应的元素
    this.products.splice(index, 1);
  }
}

补充小提示 #

• 用v-model绑定输入框，能让Vue自动处理数据同步，比原生获取id值的方式更简洁高效。
• v-for循环时一定要加上:key属性，帮助Vue高效更新DOM。
• 可以根据需求给添加功能加重复名称校验，或者给删除功能加确认提示，进一步提升用户体验。

内容的提问来源于stack exchange，提问作者John Wesley