Vue - 如何异步更新表数据答案

【问题标题】：Vue - How to update Table data asynchronousVue - 如何异步更新表数据
【发布时间】：2020-02-11 23:35:33
【问题描述】：

我的 vue 表目前遇到了一个奇怪的问题（我正在使用 vuetify 框架）。基本上我有一个带有用户权限和复选框的表，以查看用户是否有权做某事。该表与此类似

<v-data-table
  id="permission-table"
  v-model="permissionTable.selected"
  :headers="permissionTable.headers"
  :items="permissionTable.users"
  :item-key="login"
  :items-per-page="5"
  class="elevation-1"
>
  <template v-slot:item.admin="{ item }">
    <v-checkbox class="cb-center" v-model="item.admin" @change="updateUserPermission(item)"></v-checkbox>
  </template>
  <template v-slot:item.responsible="{ item }">
    <v-checkbox class="cb-center" v-model="item.responsible" @change="updateUserPermission(item)"></v-checkbox>
  </template>
  <template v-slot:item.creator="{ item }">
    <v-checkbox class="cb-center" v-model="item.creator" @change="updateUserPermission(item)"></v-checkbox>
  </template>
  <template v-slot:item.delete="{ item }">
    <font-awesome-icon class="icon-clickable" icon="trash"  @click="deleteUser(item._id)"/>
  </template>
</v-data-table>

如您所见，如果触发了复选框的更改事件，则会触发 updateUserPermission 方法。此方法将发出一个 http 请求并从服务器接收用户信息。所以行为应该是。启用管理员权限 --> 复选框被启用 --> 正在接收响应，如果例如响应说 admin 仍然是错误的（我为测试而实施）该复选框将再次被取消选中。它应该做什么，因为它是通过 v-model 和属性绑定的。

现在在创建的事件中，我首先获取一些这样的用户

async created(){
    this.permissionTable.users = await getCurrentUsers();
},

正如预期的那样，我的表格被正确填满。为了更新权限，我现在用我的 updateUserPermissions beeing 伪造了一个休息电话

async updateUserPermissions(){
return new Promise(resolve => {
    setTimeout(async  () => {
      Object.assign(User, { admin: false });
      resolve(User);
    }, 2000);
  })
}

现在我的用户最初添加到表中，一切都按预期工作。（首先复选框被选中，但在返回 admin:false 的响应后未被选中）但是如果我通过一种方法将新用户添加到该表中，updateUserPermissions 会发生以下情况。

数据设置正确。所以用户对象在 2 秒后被设置为 admin=false。但它不会在网站的视图中得到更新。在这里它仍然被检查。这只发生在未通过创建添加的项目上。旧条目仍然可以正常工作。任何想法我做错了什么？

【问题讨论】：

标签： javascript vue.js data-binding vuetify.js

【解决方案1】：

好的，问题是这样的。由于我正在使用一个已经存在于数据中的对象并将其推送到表的数组中，然后向该对象添加更多键，因此不会设置这些对象的 getter 和 setter。

要完成这项工作，有两种选择。这里的第一个是我的首选

选项 1

推送一个新对象，而不是对数据中已有对象的引用。所以这看起来像

async addUserToSelection(){
  let user = Object.assign({},this.users.availableUsers.find(u => u.login === this.users.selected),{
    admin: false,
    creator: false,
    responsible: false
  });
  if(!this.userExistsInPermissionTable(user) && user._id){        
    try {        
      await addUserPermission(user);
      this.permissionTable.users.push(user);
    } catch (err) {
      console.log(err);
    }
  }     
}

选项 2

使用 vm.$set 方法设置新密钥（我只是展示与选项 1 的不同之处）

let user = this.users.availableUsers.find(u => u.login === this.users.selected)
this.$set(user, 'admin', false);
this.$set(user, 'creator', false);
this.$set(user, 'responsible', false);

正如我所说，我个人的偏好是选项 1，因为在我看来，如果您不熟悉 vue 的特殊功能并且更像是一种普通的 javascript 方法，它会更平易近人。

【讨论】：