你知道如何解决这个问题吗

在这example篇文章中,作者使用了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(100)时,其行为是:

当单击selectAll复选框时,只有该复选框被选中,但当我将其切换为uncheck时,下面的所有复选框都被选中

enter image description here

enter image description here

enter image description here

推荐答案

为了保持浏览器功能的一致性,我建议选中not use个"单击/更改"复选框.相反,将复选框绑定到一个值(您已经这样做了),然后对该值使用观察程序.这样,复选框的实际值将始终准确地表示其状态.所以你会有这样的东西:

<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的值发生更改时,您的代码就会被运行.这解决了这个问题,而没有渲染顺序的怪异.

Vue.js相关问答推荐

如何在AXIOS调用响应中动态导入视频并创建它的绝对路径?

过渡如何在 Vue JS 3 中的图像上工作?

在 v-for 中定义变量有什么问题吗?

如何使用 async/await 在 vue js 中添加标头

vite - 具有相对assets资源 路径的子页面

Vue3 动态渲染

如果 Vuetify 自动完成没有匹配的结果,则保留输入的文本

如何在 Nativescript 应用程序中调用 axios/api 调用

VueJS:为什么在input事件处理程序中触发Input输入事件?

在基于 TypeScript 的 Vue 中将 vuex 状态和Mutations绑定到复选框组件属性

在 vue-router 中带有路由的 Vuejs2 模态

事件 click点击的无效处理程序:未定义

无法访问数据对象的嵌套属性

交换数组项

如何将事件绑定到 Vuetify 中的树视图 node ?

Vuejs - 使用 v-if 切换的保持活动组件

如何让 Vue 在 shadow dom 中工作

如何从方法内部访问数据

更改时(change)调用函数

如何在 Promise 回调中更新 Vue 应用程序或组件的属性?