单击复选框后，V模型未更新

Question

任何想法如何解决此问题：

在此示例中，作者使用的vue 2.3.2完美无缺，

new Vue({
  el: '#app',
  data: {
    users: [{
        "id": "Shad",
        "name": "Shad"
      },
      {
        "id": "Duane",
        "name": "Duane"
      },
      {
        "id": "Myah",
        "name": "Myah"
      },
      {
        "id": "Kamron",
        "name": "Kamron"
      },
      {
        "id": "Brendon",
        "name": "Brendon"
      }
    ],
    selected: [],
    allSelected: false,
    userIds: []
  },
  methods: {
    selectAll: function() {
      this.userIds = [];

      if (this.allSelected) {
        for (user in this.users) {
          this.userIds.push(this.users[user].id.toString());
        }
      }
    },
    select: function() {
      this.allSelected = false;
    }
  }
})

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <h4>User</h4>
  <div>
    <table>
      <tr>
        <th>Name</th>
        <th>Select All<input type="checkbox" @click="selectAll" v-model="allSelected"></th>
      </tr>
      <tr v-for="user in users">
        <td>{{ user.name }}</td>
        <td><input type="checkbox" v-model="userIds" @click="select" :value="user.id"></td>
      </tr>
    </table>
  </div>

  <span>Selected Ids: {{ userIds }}</span>
</div>

当我将其切换到2.5.16（<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> ）时，该行为很奇怪：

当单击selectAll复选框时，仅选中该复选框，但是当我将其切换为取消选中时，下面的所有复选框均被选中

Answer 1

为了获得一致的浏览器功能，我建议不要使用复选框的单击/更改。而是将复选框绑定到一个值（您已经完成），然后在该值上使用观察程序。这样，复选框的实际值将始终准确地表示其状态。所以你会有这样的事情：

<input type="checkbox" v-model="allSelected">


Vue.component({..., {
    data: function() {
             return {
                allSelected: false,
             }
          }
    },
    watch: {
        allSelected: function(val){
            //Use your source of truth to trigger events!
            this.doThingWithRealValue(val); 
        }
    }
});

您已经将组件数据值allSelected用作真实来源，因此您应将此真实来源用作实际触发元素值，而不是单击。只要allSelected的值发生变化，您的代码就会被执行。这解决了渲染顺序怪异的问题。