如何根据 vuetify 数据上的选定项目修改项目 table

Question

让项目是：

desserts: [
     {
       name: 'Frozen Yogurt',
       calories: 159,
       fat: 6.0,
       carbs: 24,
       protein: 4.0,
       iron: '1%'
    },
    {
       name: 'Ice cream sandwich',
       calories: 237,
       fat: 9.0,
       carbs: 37,
       protein: 4.3,
       iron: '1%'
    },
    {
      name: 'Eclair',
      calories: 262,
      fat: 16.0,
      carbs: 23,
      protein: 6.0,
      iron: '7%'
    }
]

我想在 selection 的基础上为所有对象添加额外的属性，例如 isActive: true 或 isActive: false。因此，如果用户 select Frozen Yogurt & Ice cream sandwich 列并单击自定义按钮 Add Selected 按钮，我应该像这样获取对象数组：

desserts: [
         {
           name: 'Frozen Yogurt',
           calories: 159,
           fat: 6.0,
           carbs: 24,
           protein: 4.0,
           iron: '1%',
           isActive: true
        },
        {
           name: 'Ice cream sandwich',
           calories: 237,
           fat: 9.0,
           carbs: 37,
           protein: 4.3,
           iron: '1%',
           isActive: true
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
          isActive: false
        }
    ]

有什么 vuetify 方法可以做到这一点吗？或者我们应该在自定义函数中使用纯 javascript 与点击事件绑定来做到这一点：

<v-btn
   @click="sendData"
  >
    Add Selected
</v-btn>

如何有效地做到这一点？

.. 更新：.......

我想我已经在 console.log(submittedData) 达到了预期的输出。但我认为我的 sendData 功能现在有点复杂。你能帮我简化一下吗？

Codepen Demo

Answer 1

遍历甜点
用新的 isActive 传播每个项目属性
将 .includes 方法中的布尔值 return 赋值给 isActive

sendData() {
      let result = this.desserts.map((item) => 
          ({ ...item, isActive: this.selected.includes(item) }));
      console.log(result);
    }

Code Pen Demo

如何根据 vuetify 数据上的选定项目修改项目 table

How to modify items based on selected items on vuetify data table

javascript

vue.js

vuetify.js