Question

我在v-for中嵌套了一个v-select项。.

因此，基本上，项中的v-for项给了我一张包含所有项的表。在此表中，我有一个v-select，其中包含它自己的从计算属性（getter）中提取的项目数组。

因此，如果我有3个项目，那么我将有一个3个项目表，其中有3个v选择，所有这些都包含从计算所得的相同下拉选项。

我的问题是，当我在一个v型选择中选择一个选项时，它会填充到所有选项中。

如何配置它以仅填充一个特定的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选择，所有这些都具有相同的下拉选项来自availableSelections（）。但是，当我从一行的v-select中选择一个选项时，它不会填充其他行中的其他v-select。

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

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

1 个答案: