Vuetify data table v-model选中项在表格数据刷新时无响应如何解决

问题根因 #

Vuetify v-data-table 默认开启 return-object: true 配置，选中项存储的是首次选中时的对象引用。你定时刷新表格数据源时，替换了整个数组，数组内的对象都是全新的引用，和selected数组中存储的旧对象没有关联，因此属性不会自动同步更新。

解决方案 #

方案1：配置return-object属性（改动最小，适合大量表格批量修改）

直接给v-data-table添加return-object="false"配置即可，此时v-model绑定的selected数组存储的是你配置的item-key对应的值（示例中是每行的name字段值），而非完整对象。
需要使用完整选中对象时，通过计算属性实时从最新的数据源数组中匹配即可，天然就是最新值。

HTML修改示例：

<v-data-table
  v-model="selected"
  show-select
  item-key="name"
  return-object="false" <!-- 仅需新增这一行配置 -->
  :headers="headers"
  :items="desserts"
  :options.sync="options"
  :server-items-length="totalDesserts"
  :loading="loading"
  class="elevation-1"
>
</v-data-table>

新增计算属性获取实时的选中对象：

computed: {
  selectedItems() {
    // 永远从最新的desserts数组匹配选中项
    return this.selected.map(name => this.desserts.find(item => item.name === name)).filter(Boolean)
  }
}

后续所有使用选中对象的场景直接使用selectedItems即可，表格数据刷新后会自动同步最新属性。

方案2：封装通用Mixin自动同步（无感知适配）

如果项目中大量表格都需要保留return-object: true的配置，可以封装全局通用Mixin，自动监听数据源变化更新选中项，每个业务组件无需编写额外逻辑：

// 全局通用mixin
const dataTableSyncMixin = {
  watch: {
    desserts(newItems) {
      if (!this.selected?.length) return
      // 可根据项目统一约定的itemKey做匹配
      const itemKey = 'name'
      this.selected = this.selected.map(oldItem => {
        return newItems.find(newItem => newItem[itemKey] === oldItem[itemKey])
      }).filter(Boolean)
    }
  }
}

使用时仅需在对应组件引入该Mixin即可，无需修改业务代码。

内容的提问来源于stack exchange，提问作者hobbes_child