Push new set of data dynamically when creating v-select menu in Vue

Question

Crash course in Vue here so apologies for my lack of knowledge here. I am currently using v-select and running into trouble when creating the v-select element dynamically. I trying to duplicate the element with a new set of data. Not sure what I am doing wrong here.

I would like to be able to click "add input" and a new v-select dropdown is added with the second array list "items2"

Desired output I am looking to accomplish:

Codesanbox: https://codesandbox.io/s/vuetify-ts-forked-99fy7

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>

Answer 1

You can create a variable (allItems in this example) that will hold all the array of items. Then, loop through it and render v-autocomplete elements per item. Once you click the button, just push the items2 array to allItems.

<div>
  <div v-for="(items, index) in allItems" :key="index">
    <v-autocomplete
     ...
     :items="items"
    />
  </div>
  <button @click="addInput">Add input</button>
</div>

public items1: any[] = [{ text: "Florida" }, { text: "Georgia" }, { text: "Nebraska" }, { text: "California" }, { text: "New York" }];
public items2: any[] = [{ text: "fiz" }, { text: "foo" }, { text: "bar" }];
public allItems: any[][] = [this.items1];

public addInput() {
  this.allItems.push(this.items2); // Adds the `items2` everytime you click the button
}

Here's a demo at codesandbox:

Answer 2

Your v-for doesn't make sense to me. My understanding is that you want to add selected item to the list, then you will see duplicated items in the drop down? You need to bind selected item to a variable, and then on button click push the selected item to the list. However I think v-select library automatically filter out duplicate item, which means you would not see the duplicated item you added. I created v-for at bottom so that you can see what's actually in the items array.

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