v-select being triggered automatically if incorrect

Question

The v-select that I change the option is triggering the other v-select automatically, the operation is to be independent between them, the issue that I am unable to get this code right. Someone with more experience than I could help me with?

<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' },
     ],      
   }

score 0 · Answer 1 · answered Nov 10 '20 at 13:14

You're using only one cSel variable for all items. That's why one change affects every select component.

You could either include the variable in every item. So you'd have item.cSel.

Or you convert cSel to an object and access it with an identifier:

cSel: {}

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

I used the fullName property in this case. As long as that's unique this solution should work but it would probably be better to have an id property.

v-select being triggered automatically if incorrect

1 Answers1