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" />
    <table>
      <tr>
        <td>
          <div v-for="(n, i) in defaultRow" :key="i">
            <DropDowns @dropDownSelect="onDropDownSelect" :lists="allLists[i]" @addRow="addRow" @removeRow="removeRow"></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));

          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.id>{{list.name}}</option>
    </select>
    {{selected}}
    <button  @click="addRow">Add Row</button>
    <button  @click="removeRow">Remove Row</button>
  </div>
</template>

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

        // this.otherList.push(this.selected);
        // console.log("TCL: addRow -> this.otherList", this.otherList)
      },
      removeRow() {
        this.$emit('removeRow', this.selected)

        // console.log('selected value', this.selected);
        // this.otherList = this.otherList.filter(ol => ol !== this.selected);
        // console.log("TCL: removeRow -> this.otherList", this.otherList)
      }
    }
};
</script>

<style scoped>
</style>

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

具有下拉列表的多个下拉Vue组件

0 个答案: