0

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

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

所以，如果我有 3 个项目，那么我将有一个 3 个项目表，其中包含 3 个 v-select，所有这些都包含从计算中填充的相同下拉选项。

我的问题是，当我在一个 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

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

4

1 回答 1

2

你想要这样的东西：

<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都不会更改其他组件。

于 2020-02-06T18:17:59.183 回答