vuetify v-select в v-for l oop: выбранная опция появляется во всех итерациях v-select - PullRequest
Новая
       24

vuetify v-select в v-for l oop: выбранная опция появляется во всех итерациях v-select

0 голосов
/ 06 февраля 2020

У меня есть v-выбор, вложенный в v-for для элементов ..

Так что, в принципе, v-for item в элементах дает мне таблицу, содержащую все элементы. В этой таблице у меня есть v-select, содержащий собственный массив элементов, извлеченных из вычисляемого свойства (getter).

Итак, если у меня есть 3 элемента, то у меня была бы таблица из 3 элементов с 3 v-выборами, все из которых содержали бы те же параметры выпадающего меню, что и вычисленные.

Моя проблема в том, что когда я выбираю опцию в одном v-select, он заполняется во всех из них.

Как настроить его для заполнения только одного конкретный v-select, а не все?

Удивительно, но каждый пример, который я исследовал, имеет дело либо с вложенными данными, либо с чем-то еще, не относящимся к делу. Но если это окажется дубликатом, я был бы рад указать правильное направление.

немного сокращенного кода для контекста: 

<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

Итак, мое предполагаемое поведение здесь, , если бы у меня было 3 элемента, возвращенных из getItems (), у меня было бы 3 строки, заполненные 3 именами и 3 v-выборами, все с такими же выпадающими вариантами из availableSelections ( ). Но когда я выбираю вариант из v-select из одной строки, он не заполняет другие v-select в других строках.

1 Ответ

1 голос
/ 06 февраля 2020

Хотите что-то подобное: 

<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>

В этом примере каждый v-select не изменяет другие компоненты.

...