Как удалить объект из массива v-модели, когда поле в объекте изменилось

Question

Я настроил файл vue. js с флажком ввода, который будет добавлять объект в массив при нажатии. Но у меня есть другое поле ввода ввода, которое может изменить значение одного из полей в объекте, поэтому, когда я снова нажимаю флажок, чтобы отменить выбор этого объекта, потому что исходное значение и измененное значение отличаются, v-модель на флажке просто добавляет другой объект в массив вместо удаления объекта, в котором все еще есть 2 поля с одинаковыми значениями.

Как получить v-модель для удаления объекта из массива, даже если 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: 'john@gmail.com',
    level: 'low'
  }
]

Поэтому, когда я добавляю Джона в массив, я могу добавлять и удалять его. Но когда я изменяю его уровень, поскольку уровень больше не является пустой строкой, установите флажок Johns, чтобы снова добавить его в массив users вместо его удаления.

Есть ли способ, с помощью которого v-model может удалить объект из массива в зависимости от значения одного поля, например, «имя», потому что это значение не изменится, вместо того, чтобы сопоставить весь объект с объектом, уже находящимся в массиве пользователей?

Answer 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.