如果选择不正确，则会自动触发v-select

问题描述

我更改选项的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',],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' },}

解决方法

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

您可以在每个项目中包含变量。因此，您将拥有item.cSel。

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

cSel: {}

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

在这种情况下，我使用了fullName属性。只要这是唯一的，此解决方案就应该起作用，但是拥有id属性可能会更好。