How do I handle multiple select dropdown component with their values?

Question

I have created one component for select dropdown list. My requirement is to add more of these component when your press add row button. I am able to add this component on add row button press.

I am having trouble with their value. Example lets say there are four option ['audi', 'bmw', 'volvo', 'tesla']. When the user select any value out of these like "audi" and then press Add row button.

New drop list appear with only 3 values ['bmw', 'volvo', 'tesla'] and now they have selected "bmw". My issue is when user again select value from the first/previous dropdown component - There should be only ['audi', 'volvo', 'tesla'], excluding "bmw". How can I achieve this?

I have created an array which store all other arrays option. Later when I connect to the API, I am going to create array of an object.

Please let me know. Thanks

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <button :disabled="isDisabled" @click="addRow">Add Row</button>
    <table>
      <tr>
        <td>
          <div v-for="(n, i) in defaultRow" :key="i">
            <DropDowns @dropDownSelect="onDropDownSelect" :lists="allLists[i]"></DropDowns>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import DropDowns from "./components/DropDowns.vue";

export default {
  name: "app",
  data() {
    return {
      defaultRow: 1,
      allLists: [["audi", "volvo", "mec", "toyota"]],
      selectedValue: ""
    };
  },
  components: {
    DropDowns
  },
  computed: {
    isDisabled() {
      return this.defaultRow === this.lists.length ? true : false;
    }
  },
  methods: {
    addRow() {
      if (this.defaultRow < 4) {
        console.log('selectedValue',this.selectedValue)
        if (this.selectedValue) {
          this.allLists.push(this.allLists[this.defaultRow - 1].filter(l => l !== this.selectedValue));
          this.allLists[this.defaultRow - 1] = this.allLists[this.defaultRow - 1].filter(l => l === this.selectedValue )
          console.log("TCL: addRow -> this.lists", this.allLists);
        }
      }
    },
    onDropDownSelect(selected) {
      this.selectedValue = selected;
      console.log(
        "TCL: onDropDownSelect -> this.selectedValue",
        this.selectedValue
      );
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Dropdown component:

<template>
  <div>
    <select v-model="selected" @change="getValue">
      <option disabled value="">Please select one</option>
      <option v-for="list in lists" :value=list :key=list>{{list}}</option>
    </select>
    {{selected}}
  </div>
</template>

<script>
export default {
    props: ['lists'],
    data() {
      return {
        selected: ''
      }
    },
    methods: {
      getValue() {
        this.$emit('dropDownSelect', this.selected)
      }
    }
};
</script>

<style scoped>
</style>

Right now, once user select value from select. They can only see that value.

Answer 1

This is a way to do it :

check the sample : https://codesandbox.io/s/vue-template-5jbmz ;

I commented what i've changed above the line .... basically your main issue was that your defaultRow was not incrementing ....so you were just pushing an empty array to your allLists