时间戳

首页 > 解决方案 > 将检查的项目详细信息推送到数组并使用 vuejs 基于检查/取消检查更新数组

javascript - 将检查的项目详细信息推送到数组并使用 vuejs 基于检查/取消检查更新数组

问题描述

我有一个带有多个详细信息的产品 json，如下所示。

产品.json

products: [
        {
            "id": "6",
            "name": "Cake-WhiteForest",
            "manufacturer": "Cake Cafe",
            "category": "WhiteForest",
            "color": "White",
            "available": true,
            "address": "16th Lane",
            "quantity": 8,
            "description": "milk chocolate wafer",
            "price": 12,
            "delivery": "small"
        },
        {
            "id": "10",
            "name": "Donuts-Choco bun",
            "manufacturer": "Donut House",
            "category": "Choco bun",
            "color": "chocolate",
            "available": true,
            "address": "13th Avenue",
            "quantity": 14,
            "description": "Donuts with dark chocolate",
            "price": 13,
            "delivery": "minibox"
        }
       ]

我正在使用复选框显示这些产品名称，例如带有格式名称（如标签）的列表，如下所示：

CheckBox1  Cake-WhiteForest
CheckBox2  Donuts-Choco bun

方法：（复选框更改事件）

check(e) {
    if (e.target.checked) {
      let files = this.products.find(item => item.id === e.target.value)
      this.getCheckedProducts.push(files)
    }
  }

组件代码

<li
                v-for="file in products"
                :key="file.id">
                <span>
                  <input type="checkbox"
                         :id="file.id"
                         :value="file.id"
                         v-model="checkedFiles"
                         @change="check($event)"/>
                  <span class="doc_input">
                    <i class="el-icon-folder" aria-hidden="true"></i>
                  </span>
                  <span class="product__name">
                    {{file.name}}
                  </span>
                </span>
              </li>

现在，问题是如果我检查了列表的两个项目，那么它将这两个项目正确地推入“getCheckedProducts”数组。如果我取消选中任何复选框但它没有更新。还有两个项目。如何更新复选框的状态？

显示原型详细信息的 V 模型日志。如何为此使用 v-model？因为我正在传递对象数组。

标签： javascriptarraysvue.jsvuejs2

解决方案

避免getCheckedProducts手动创建。checkedFiles您有一个已包含已检查产品 ID 的变量。如果您使用checkedProducts基于checkedFiles的计算属性，当您选中或取消选中复选框时，您的产品计算属性将自动更新，因为它会自动更新 v-model，并随后更新依赖它的所有计算属性。

computed: {
  checkedProducts() {
    // Map ids to their corresponding products
    return this.checkedFiles.map(
      id => {
        // Assumption: All ids in checkedFiles actually have a product in the products array
        return this.products.find(product => product.id === id);
      }
    );
  }
}

推荐阅读