vuetify v-select in v-for loop: selected option appears in all iterations of the v-select

Question

I have a v-select nested in a v-for for items..

So, basically, v-for item in items gives me a table containing all items. In this table, I have a v-select containing it's own array of items pulled from a computed property (getter).

So, if I have 3 items, then I would have a 3 item table with 3 v-selects all containing the same dropdown options populated from the computed.

My issue is, when I select an option in one v-select, it populates in all of them.

How do I configure it to only populate the one particular v-select, and not all of them?

Surprisingly, every example I have researched, is either dealing with nested data, or something else not relevant here. But if this does happen to be a duplicate, I would be happy to be pointed in the right direction.

a bit of shorthand code for context:

<v-data-table :items="getItems">
<tr>
<td>{{ item.name }}</td>
<td> <v-select :items="availableSelections"/>
</tr>
</v-data-table>

get getItems() {
 // returns iterated items
}
get availableSelections() {
 // returns selection choices in an array

So, my intended behavior here is, if I have 3 items returned from getItems(), I would have 3 rows filled with 3 names and 3 v-selects, all with the same dropdown choices from availableSelections(). But when I select an option from a v-select from one row, it would not populate the other v-selects in other rows.

Answer 1

Do you want something like that:

<template>
  <v-app>
    <v-content>
      <v-data-table :items="items">
        <template v-slot:items="{ item }">
          <td>{{ item.name }}</td>
          <td>
            <v-select :items="options" v-model="item.optionSelected" />
          </td>
          <td>{{ item.optionSelected }}</td>
        </template>
      </v-data-table>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    items: [
      { name: 'Name 1', optionSelected: null },
      { name: 'Name 2', optionSelected: null },
      { name: 'Name 3', optionSelected: null },
    ],
    options: ['Option 1', 'Option 2', 'Option 3'],
  }),
};
</script>

In this example, each v-select don't change others components.