如何处理多个选择下拉组件及其值？

Question

我为选择下拉列表创建了一个组件。 我的要求是在您按下添加行按钮时添加更多这些组件。 我可以在按下添加行按钮时添加此组件。

我在他们的价值上遇到麻烦。 例如，假设有四个选项['audi'，'bmw'，'volvo'，'tesla']。 当用户从其中选择任何值（例如“ audi”），然后按“添加行”按钮。

新的下拉列表仅显示3个值['bmw'，'volvo'，'tesla']，现在它们选择了“ bmw”。 我的问题是，当用户再次从第一个/上一个下拉菜单中选择值时-应该只有['audi'，'volvo'，'tesla']，不包括“ bmw”。 我该如何实现？

我创建了一个存储所有其他数组选项的数组。 稍后，当我连接到API时，我将创建一个对象数组。

请告诉我。 谢谢

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

下拉组件：

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

现在，一旦用户从select中选择值。 他们只能看到该值。

Answer 1

这是一种方法：

检查样本： https : //codesandbox.io/s/vue-template-5jbmz ;

我评论了我在行上方所做的更改....基本上，您的主要问题是您的defaultRow没有递增..所以您只是将空数组推入allLists