vuetify.js - 如果不正确，v-select 会自动触发

Question

我更改选项的 v-select 正在自动触发另一个 v-select，操作是它们之间的独立操作，我无法正确获取此代码的问题。比我有更多经验的人可以帮助我吗？

<v-data-table
      :headers="headers"
      :items="res"
      item-key="Name"
      class="elevation-23"
    >
      <template v-slot:item.path="{ item }">
        <v-select
          v-model="cSel"
          :items="item.path"
      ></v-select>
      </template>    
    </v-data-table>

data () {
    return {
      expanded: [],
      singleExpand: false,
      cSel: 'A',
      res: [
        {
          fullName: 'name 1',
          med: 'med 1',
          startDate: 'start  date 1',
          path:  ['A', 'B', 'C', 'D'],
        },
         {
          fullName: 'name 2',
          med: 'med 2',
          startDate: 'start  date 2',
          path:  ['A', 'B', 'C', 'D'],
        },
       ],
       totalRes: 0,
        search: '',
        loading: false,
        options: {
          page: 1,
          itemsPerPage: 40,
        },
        headers: [
      { text: 'Name', value: 'fullName' },
      { text: 'Med', value: 'med' },
      { text: 'Start Date', value: 'startDate' },
      { text: 'Create  ', value: 'path', width: '200' },
     ],      
   }

Answer 1

您cSel对所有项目仅使用一个变量。这就是为什么一个更改会影响每个选择组件。

您可以在每个项目中包含变量。所以你会有item.cSel.

或者您转换cSel为对象并使用标识符访问它：

cSel: {}

<v-select
  v-model="cSel[item.fullName]"
  :items="item.path"
></v-select>

在这种情况下，我使用了该fullName属性。只要这是独一无二的，这个解决方案应该可以工作，但拥有id房产可能会更好。