Vue.js中如何通过复选框按序为客户添加/移除产品

修改后的完整代码 #

<template>
  <div>
    <!-- 产品复选框列表 -->
    <div v-for="(product, index) in products" :key="product.i">
      <input
        type="checkbox"
        :id="`product-${index}`"
        :value="product"
        @click="onSelected(product, $event)"
      />
      <label :for="`product-${index}`">{{ product.name }}</label>
    </div>

    <!-- 客户信息表格 -->
    <div>
      <table>
        <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Surname</th>
            <th scope="col">Birthday</th>
            <th scope="col">Assigned Products</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(customer, idx) in customers" :key="idx">
            <td><input v-model="customer.name" type="text" placeholder="Name" /></td>
            <td><input v-model="customer.surname" type="text" placeholder="Surname" /></td>
            <td><input v-model="customer.birthday" type="date" placeholder="Birthday" /></td>
            <td>
              <span v-for="(p, pIdx) in customer.products" :key="p.i">{{ p.name }} </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customers: [
        { name: null, surname: null, birthday: null, products: [] },
        { name: null, surname: null, birthday: null, products: [] },
        { name: null, surname: null, birthday: null, products: [] },
      ],
      products: [
        { i: 1, name: 'home' },
        { i: 2, name: 'car' },
        { i: 3, name: 'yatch' },
        { i: 4, name: 'villa' },
      ],
      clickCount: 0, // 记录点击次数，用于确定分配的客户索引
    };
  },
  methods: {
    onSelected(product, event) {
      const isChecked = event.target.checked;
      if (isChecked) {
        // 计算要分配的客户索引：首次点击对应第一个客户，第二次第二个，第三次第三个，循环往复
        const customerIndex = this.clickCount % this.customers.length;
        this.customers[customerIndex].products.push(product);
        this.clickCount++;
      } else {
        // 取消勾选时，遍历所有客户，找到包含该产品的客户并移除
        this.customers.forEach(customer => {
          const productIndex = customer.products.findIndex(p => p.i === product.i);
          if (productIndex !== -1) {
            customer.products.splice(productIndex, 1);
          }
        });
      }
    },
  },
};
</script>

关键修改点说明 #

• 修复HTML结构错误：将<tbody>移入<table>标签内，符合HTML规范。
• 完善复选框交互：
  • 给每个复选框绑定唯一id并搭配<label>，提升操作便捷性。
  • 点击事件传递product对象和$event，直接获取复选框的选中状态。
• 扩展客户数据结构：给每个客户对象添加products数组字段，用于存储分配的产品。
• 实现核心分配逻辑：
  • 新增clickCount变量记录点击次数，通过clickCount % customers.length计算目标客户索引，实现循环分配逻辑。
  • 勾选时将产品添加到对应客户的products数组；取消勾选时遍历所有客户，定位到产品所属客户并移除该产品。
• 精简冗余代码：删除原代码中逻辑错误的getCheck方法和无用的selectedProduct变量，简化代码结构。

功能验证 #

• 首次点击任意产品复选框，产品会被添加到第一个客户的「Assigned Products」列。
• 第二次点击任意产品复选框，产品会被添加到第二个客户的对应列。
• 第三次点击任意产品复选框，产品会被添加到第三个客户的对应列。
• 取消勾选某产品时，该产品会从其所属的客户列表中移除。

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