Typescript 在Vue中创建v-select菜单时动态推送新数据集

这里有Vue速成班，很抱歉我在这里缺乏知识。我目前正在使用v-select，在动态创建v-select元素时遇到了麻烦。我试图用一组新数据复制元素。我不知道我做错了什么

我希望能够单击AddInput，并使用第二个数组列表items2添加一个新的v-select下拉列表

我希望实现的期望输出：

密码箱：

Vue.js：

<template>
  <div>
    <div
      class="batch-row"
      :id="`${index}`"
      v-for="(filter, index) in items.slice(0, 1)"
    >
      <v-select
        :items="items"
        :id="`${index}`"
        item-text="text"
        label="Standard"
        v-model="filter.value"
      >
      </v-select>
    </div>
    <button @click="addInput">Add input</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Dropdown extends Vue {
  public counter: number = 0;
  public items: any[] = [
    { text: "Florida" },
    { text: "Georgia" },
    { text: "Nebraska" },
    { text: "California" },
    { text: "New York" },
  ];
  public items2: any[] = [{ text: "fiz" }, { text: "foo" }, { text: "bar" }];

  public addInput(): void {
    this.items.push({
      id: `${+this.counter}`,
    });
  }
}
</script>

---

你的v-for对我来说没有意义。我的理解是，您希望将所选项目添加到列表中，然后您将在下拉列表中看到重复的项目？您需要将所选项目绑定到一个变量，然后单击按钮将所选项目推送到列表中。但是，我认为v-select库会自动过滤掉重复项，这意味着您将看不到添加的重复项。我在底部创建了v-for，以便您可以看到items数组中的实际内容

<template>
  <div>
    <v-select
        :items="items"
        item-text="text"
        label="Standard"
        v-model="selectedItem"
      >
      </v-select>
    <button @click="addInput">Add input</button>
    <h2>content in items variable:</h2>
    <p v-for="(item, index) in items" :key="index">{{item.text}}</p>
  </div>
</template>

<style lang="scss" scoped>
$gray: #868e96;

small {
  display: block;
  margin-top: 0.25rem;
  color: $gray;
  font-style: italic;
  text-align: left;
}
</style>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Dropdown extends Vue {
  public counter: number = 0;
  public items: any[] = [
    { text: "Florida" },
    { text: "Georgia" },
    { text: "Nebraska" },
    { text: "California" },
    { text: "New York" },
  ];
  public selectedItem = null;
  public items2: any[] = [{ text: "fiz" }, { text: "foo" }, { text: "bar" }];

  public addInput(): void {
    if (this.selectedItem != null)
      this.items.push({text: this.selectedItem});
  }
}
</script>

---

你的v-for对我来说没有意义。我的理解是，您希望将所选项目添加到列表中，然后您将在下拉列表中看到重复的项目？您需要将所选项目绑定到一个变量，然后单击按钮将所选项目推送到列表中。但是，我认为v-select库会自动过滤掉重复项，这意味着您将看不到添加的重复项。我在底部创建了v-for，以便您可以看到items数组中的实际内容

<template>
  <div>
    <v-select
        :items="items"
        item-text="text"
        label="Standard"
        v-model="selectedItem"
      >
      </v-select>
    <button @click="addInput">Add input</button>
    <h2>content in items variable:</h2>
    <p v-for="(item, index) in items" :key="index">{{item.text}}</p>
  </div>
</template>

<style lang="scss" scoped>
$gray: #868e96;

small {
  display: block;
  margin-top: 0.25rem;
  color: $gray;
  font-style: italic;
  text-align: left;
}
</style>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Dropdown extends Vue {
  public counter: number = 0;
  public items: any[] = [
    { text: "Florida" },
    { text: "Georgia" },
    { text: "Nebraska" },
    { text: "California" },
    { text: "New York" },
  ];
  public selectedItem = null;
  public items2: any[] = [{ text: "fiz" }, { text: "foo" }, { text: "bar" }];

  public addInput(): void {
    if (this.selectedItem != null)
      this.items.push({text: this.selectedItem});
  }
}
</script>

在本例中，您可以创建一个变量allItems，该变量将保存所有项数组。然后，循环遍历它并渲染每个项目的v-autocomplete元素。单击按钮后，只需将items2数组按到allItems

添加输入 公共项目1:any[]=[{text:Florida}，{text:Georgia}，{text:Nebraska}，{text:California}，{text:New York}]； 公共项2:any[]=[{text:fiz}，{text:foo}，{text:bar}]； 公共联合项：任意[][]=[this.items1]； 公共额外投入{ this.allItems.pushthis.items2；//每次单击按钮时都添加'items2' } 以下是一个演示：

在本例中，您可以创建一个变量allItems，该变量将保存所有项数组。然后，循环遍历它并渲染每个项目的v-autocomplete元素。单击按钮后，只需将items2数组按到allItems

添加输入 公共项目1:any[]=[{text:Florida}，{text:Georgia}，{text:Nebraska}，{text:California}，{text:New York}]； 公共项2:any[]=[{text:fiz}，{text:foo}，{text:bar}]； 公共联合项：任意[][]=[this.items1]； 公共额外投入{ this.allItems.pushthis.items2；//每次单击按钮时都添加'items2' } 以下是一个演示：

---

不是，正是我想要的。我想在下拉菜单中的2个不同的数据集。第一组是items数组，如果我单击AddInput，它将添加另一个下拉列表，其中包含第二个数组列表items 2。我已经附上了我想要完成的内容的屏幕截图，而不是我正在寻找的内容。我想在下拉菜单中的2个不同的数据集。第一组是items数组，如果我单击AddInput，它将添加另一个下拉列表，其中包含第二个数组列表items 2，我已经附上了我想要完成的屏幕截图