javascript - V-model 不会在复选框列表更改时更新

Question

我有一个v-for在组件上使用 a 呈现的复选框列表。选中后，复选框会用当前选中的复选框填充数组。当一个或多个选中的复选框被删除时，问题就出现了 -v-model仍然计算已删除的复选框。v-model当我的阵列更新时，如何更新？我尝试强制重新渲染解决问题的整个组件，但这不是我需要的解决方案。

  <div v-for="player in players" :key="player.id">
  <input
    v-model="selectedPlayers"
    :value="player.id"
    type="checkbox"
    :id="player.id"
  />
  <label :for="player.id">
    {{ player.name }}
  </label>
</div>

沙盒

问题

期望的结果

标签： javascriptvue.js

Answer 1

所以据我了解，你有这个player2数组，你需要比较。数组中的任何内容都players2必须存在于selectedPlayers数组中。为此，只需使用 use maparray 函数迭代players2数组以仅返回ids玩家的 ，然后将它们存储在选定的玩家数组中，这是一个反应性属性将自动修补DOM. 绝对不需要重新渲染组件。

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: "#app",
  data() {
    return {
      selectedPlayers: [],
      players: [
        {name: "Arnold",id: "1"},
        {name: "Rambo",id: 2},
        {name: "Terminator",id: 3},
        {name: "Titan",id: 4},
        {name: "Odin",id: 5},
      ],
      players2: [
        {name: "Titan",id: 4},
        {name: "Odin",id: 5},
      ],
    };
  },
  methods: {
    clicked() {
      this.players = this.players2;
      this.selectedPlayers = this.players2.map(p => p.id);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  If you check all checkboxes and press the button, the array still contains all elements
  <div v-for="player in players" :key="player.id">
    <input v-model="selectedPlayers" :key="players.length" :value="player.id" type="checkbox" :id="player.id" />
    <label :for="player.id">
        {{ player.name }}
      </label>
  </div>
  {{ selectedPlayers }}
  <button @click="clicked">Press me</button>
</div>