vuetify v-select in v-for 循环：selected 选项出现在 v-select 的所有迭代中

Question

我有一个 v-select 嵌套在 v-for 中用于项目..

所以，基本上，v-for item in items 给我一个包含所有项目的 table。在这个 table 中，我有一个 v-select 包含它自己的从计算的属性 (getter) 中提取的项目数组。

因此，如果我有 3 个项目，那么我将有一个 3 个项目 table 和 3 个 v-select，它们都包含从计算结果中填充的相同下拉选项。

我的问题是，当我 select 一个 v-select 中的一个选项时，它会填充所有选项。

如何将其配置为仅填充一个特定的 v-select，而不是全部？

令人惊讶的是，我研究过的每个示例要么处理嵌套数据，要么处理与此处无关的其他内容。但如果这确实是重复的，我会很高兴被指出正确的方向。

一些 shorthand 上下文代码：

<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

所以，我在这里的预期行为是， 如果我从 getItems() 返回 3 个项目，我将有 3 行填充 3 个名称和 3 个 v-selects，都具有来自 availableSelections() 的相同下拉选项。但是当我 select 来自一行中 v-select 的选项时，它不会填充其他行中的其他 v-selects。

Answer 1

你想要这样的东西吗：

<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不改变其他组件。

vuetify v-select in v-for 循环：selected 选项出现在 v-select 的所有迭代中

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

vue.js

v-for

vuetify.js

v-select