Vue.js 购物清单管理：添加复选框和输入框

应用场景

在食谱网站或烹饪应用程序中，用户经常需要跟踪和管理购物清单。此代码片段提供了一种使用 Vue.js 创建交互式购物清单的方法，允许用户添加、删除和更新清单中的项目。

基本功能

该代码片段实现了以下功能：

• 显示购物清单中的项目，每个项目包含复选框和数量输入框。
• 允许用户添加新项目，包括项目名称和数量。
• 允许用户删除现有项目。
• 允许用户更新项目数量。

功能实现步骤及关键代码分析

1. 创建响应式购物清单

首先，使用 Vue.js 的 ref 创建一个响应式的购物清单数组：

const ingredients = ref([
  {
    name: "asparagus spears",
    quantity: 8,
  },
  {
    name: "handfuls cherry tomatoes",
    quantity: 6,
  },
]);

2. 添加项目

用户可以通过点击“添加所有食材到购物清单”按钮添加新项目。此按钮触发一个事件处理程序，该处理程序使用 push 方法将新项目添加到 ingredients 数组中：

<button type="button" @click="addIngredients">
  Add all ingredients to the shopping list
</button>

methods: {
  addIngredients() {
    ingredients.value.push({
      name: "New ingredient",
      quantity: 1,
    });
  },
}

3. 删除项目

用户可以通过点击每个项目旁边的复选框来删除项目。此复选框与一个事件处理程序相关联，该处理程序使用 splice 方法从 ingredients 数组中删除相应项目：

<input type="checkbox" @click="removeIngredient(index)">

methods: {
  removeIngredient(index) {
    ingredients.value.splice(index, 1);
  },
}

4. 更新项目数量

用户可以通过更新每个项目旁边的数量输入框来更新项目数量。此输入框与一个事件处理程序相关联，该处理程序使用 Vue.set 方法更新 ingredients 数组中相应项目的数量：

<input type="number" @input="updateQuantity(index, $event.target.value)">

methods: {
  updateQuantity(index, value) {
    Vue.set(ingredients.value[index], "quantity", value);
  },
}

总结与展望

开发此代码片段的经验和收获包括：

• 对 Vue.js 响应式系统和事件处理的深入了解。
• 使用 Vue.js 管理动态数组的最佳实践。
• 如何创建交互式和用户友好的表单。

未来，该购物清单功能可以扩展和优化：

• 允许用户搜索和过滤项目。
• 提供自动完成功能以帮助用户快速添加项目。
• 集成与其他应用程序或服务的连接，例如食谱网站或杂货配送服务。