当对象中的字段发生更改时如何从 v-model 数组中删除对象

Posted 2023-02-22

【中文标题】当对象中的字段发生更改时如何从 v-model 数组中删除对象

【英文标题】：How to remove object from v-model array when field in the object has changed

【发布时间】：2020-05-27 22:56:44

【问题描述】：

我已经设置了一个带有复选框输入的 vue.js 文件，当单击该复选框时，它将向数组中添加一个对象。但是我有另一个选择框输入可以更改对象中一个字段的值，因此当我再次单击复选框以取消选择该对象时，因为原始值和更改后的值不同，复选框上的 v-model只需将另一个对象添加到数组中，而不是删除仍然具有 2 个具有相同值的字段的对象。

如何让 v-model 从数组中删除对象，即使 1 个字段值已更改？

<template>
  <div>
    <input type="checkbox" v-model="user" :value=" name: displayName, email: userEmail, level: '' " />
    <select v-model="user.level">
      <option value="low"> Low </option>
      <option value="middle"> Middle </option>
      <option value="high"> High </option>
    </select>
  </div>
</template>

<script>
export default 
  data: () => (
    user: []
  )

</script>

一个包含对象的示例用户数组。

user: [
  
    name: 'John',
    email: '[e-mail]',
    level: 'low'
  
]

因此，当我将 John 添加到数组中时，我可以添加和删除他。但是当我更改他的级别时，因为 level 不再是一个空白字符串，所以再次单击 Johns 复选框将他再次添加到 users 数组而不是删除他。

有没有一种方法可以使 v-model 能够根据一个字段的值从数组中删除一个对象，例如'name'，因为该值不会改变，而不是将整个对象与 users 数组中已有的对象进行匹配？

【问题讨论】：

请提供minimal reproducible example 例如，您在哪里添加/删除用户？最好是一个工作演示，但至少提供最少的可重现代码。

【参考方案1】：

您的user 是一个数组，您的选择设置为模型user.level。这样做是将属性level 放到数组中。您想要的是对该数组中的单个对象执行此操作。

你缺少的是v-for

<div v-for="_user in user">
    <input type="checkbox" v-model="_user" :value=" name: displayName, email: userEmail, level: '' " />
    <select v-model="_user.level">
      <option value="low"> Low </option>
      <option value="middle"> Middle </option>
      <option value="high"> High </option>
    </select>
  </div>

也许应该将用户数组命名为users。