如何为Vuetify v-data-table中v-select绑定vuex-map-fields实现数据更新？

我有一个v-data-table，其中一列是v-select组件。数据存在Vuex里，用vuex-map-fields库来读写数据。

简化后的UI代码：

<v-data-table
  :items="data"
>
  <template v-slot:item.type="{ item }">
    <v-select
      v-model="?"
      :items="types"
      item-text="description"
    />
  </template> 
</v-data-table>

简化后的数据结构：

// Vuex state里的数据
data: [
    {
        // 其他字段
        type: <some_uuid_1>
    },
    {
        // 其他字段
        type: <some_uuid_2>
    }   
],

// 类型选项数据
types: [
    {
        id: <some_uuid_1>,
        description: "first"
    },
    {
        id: <some_uuid_2>,
        description: "second"
    }   
]

我要实现的效果是：选任意行的v-select时，Vuex里data对应的条目能跟着更新。

1. 配置Vuex模块 #

在你的Vuex模块里引入vuex-map-fields的工具方法，让它能处理字段的读写：

// store/modules/你的模块名.js
import { getField, updateField } from 'vuex-map-fields';

export default {
  state: {
    data: [/* 你的数据 */],
    types: [/* 类型选项 */]
  },
  getters: {
    getField
  },
  mutations: {
    updateField
  }
}

2. 在组件中映射数组字段 #

用vuex-map-fields的mapMultiRowFields方法，把data数组里每个元素的type字段映射成双向绑定的计算属性，这样就能直接在模板里使用：

// 你的Vue组件
import { mapMultiRowFields, mapState } from 'vuex-map-fields';

export default {
  computed: {
    // 映射data数组中每个item的type字段
    ...mapMultiRowFields('你的模块名', [
      'data.type'
    ]),
    // 把types选项数据从Vuex中获取
    ...mapState('你的模块名', ['types'])
  }
}

3. 绑定v-select的v-model #

修改插槽参数，拿到当前行的索引，然后用索引绑定对应的type字段，同时给v-select加上item-value，确保选中的值和data里的uuid匹配：

<v-data-table
  :items="data"
>
  <template v-slot:item.type="{ item, index }">
    <v-select
      v-model="data[index].type"
      :items="types"
      item-text="description"
      item-value="id" <!-- 关键配置，保证选中值与data中的type格式匹配 -->
    />
  </template> 
</v-data-table>

核心说明 #

• item-value="id"必须设置：因为data里的type存储的是uuid，和types数组中的id字段对应，这样选择后才能正确赋值。
• mapMultiRowFields已经自动处理了Vuex的getter和mutation逻辑，无需手动编写同步代码，选择值后会自动更新Vuex中的data数组。

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