Vue2+中Vuetify Data Table内v-select绑定数组无显示问题求助

问题根源 #

v-select的multiple模式下，需要明确如何匹配选中项。你的handle_fulfillments是对象数组，而marketplaces也是对象数组，但组件默认无法自动识别两个数组中对象的匹配关系，导致无法渲染选中状态。

解决方案 #

1. 配置v-select的匹配字段 #

给v-select添加item-value和item-text属性，指定用哪个字段作为选中项的唯一标识，以及下拉框显示的文本内容。假设你的marketplaces结构如下：

marketplaces: [
  { id: 24, name: "Marketplace A", auth_id: 4774 },
  { id: 28, name: "Marketplace B", auth_id: 4774 }
]

修改后的v-select代码：

<v-select
  v-model="item.handle_fulfillments"
  :items="marketplaces"
  dense
  label="Select Marketplace"
  multiple
  item-value="id"
  item-text="name"
  @change="productChange(item)"
></v-select>

• item-value="id"：告诉组件用对象的id字段作为选中项的唯一标识
• item-text="name"：指定下拉框中显示的文本内容

2. 确保v-model与items的匹配逻辑一致 #

如果你的handle_fulfillments存储的是完整对象，需要保证marketplaces中的对象和handle_fulfillments中的对象引用一致，或者通过item-value的字段值匹配。如果是值匹配，v-model会自动转换为对应item-value的数组（比如[24,28]），此时你需要调整handle_fulfillments的存储结构，或者在初始化时转换：

// 初始化returnProducts时，将handle_fulfillments转换为marketplaces中的对应对象
this.returnProducts.forEach(product => {
  product.handle_fulfillments = product.handle_fulfillments.map(f => {
    return this.marketplaces.find(m => m.id === f.id) || f;
  });
});

3. 处理Vue 2的响应式更新问题 #

如果修改handle_fulfillments时遇到响应式失效，需要使用Vue.set或者数组变异方法（如push/splice）：

productChange(item) {
  // 强制触发响应式更新
  Vue.set(item, 'handle_fulfillments', [...item.handle_fulfillments]);
}

完整修改后的插槽代码 #

<template 
  v-slot:item.handle_fulfillments="{ item }"
>
  <v-select
    v-model="item.handle_fulfillments"
    :items="marketplaces"
    dense
    label="Select Marketplace"
    multiple
    item-value="id"
    item-text="name"
    @change="productChange(item)"
  >
  </v-select>
</template>

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