Vue dynamic cycle can not select a plurality of the same data repeated selection

Foreword

1. The realization of this article is based on the function vue calculated property computed
2. Calculation of personal property computed vue feeling quite suitable for this function, as calculated by the value of the property return can ensure the relative independence, but also in its dependence on property re-calculation of the value changes.
3. happened to think of using a calculated property to accomplish this function, so afraid that they forget to write in the blog here as a summary of the author's ideas but also hope we can bring some inspiration

Renderings demo

Drop-down box to achieve weight

Implementation logic

(Specific implementation logic I wrote in a comment in the code, write down here the core logic)
1. Option to ensure that each cycle of the drop-down box cityList are independent, will not affect the other drop-down box
2. select all the options you have selected into an array arr in
3. All option display data cityList, the need to retain the current own select the option selected, and then remove some of the options have been arr

Code

<template>
  <div id="app">
    <div v-for="(item,index) in selectList" :key="index">
      <Select v-model="item.value" style="width:200px">
        <Option
          v-for="it in showCityList(item.value)"
          :value="it.value"
          :key="it.value"
        >{{ it.label }}</Option>
      </Select>
      <Button icon="md-add-circle" @click="listAdd()"></Button>
      <Button icon="md-trash" @click="listDelete()"></Button>
    </div>
  </div>
</template>

data() {
    return {
      selectList: [{ value: "" }],
      cityList: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "London",
          label: "London"
        },
        {
          value: "Sydney",
          label: "Sydney"
        },
        {
          value: "Ottawa",
          label: "Ottawa"
        },
        {
          value: "Paris",
          label: "Paris"
        },
        {
          value: "Canberra",
          label: "Canberra"
        }
      ]
    };
  },

 methods: {
    listAdd() {
      if (this.selectList.length < this.cityList.length) {
        this.selectList.push({
          value: ""
        });
      } else {
        console.log("不能再加啦");
      }
    },
    listDelete(index) {
      this.selectList.splice(index, 1);
    }
  },

computed: {
    showCityList() {
      return (val) => {
        //讲option的显示数据进行深拷贝
        let newList = JSON.parse(JSON.stringify(this.cityList));

        //处理selectList数据，返回一个新数组arr
        //arr数组就相当于所有Select选中的数据集合（没有选中的为''，不影响判断），只要在这个集合里面，其他的下拉框就不应该有这个选项
        const arr = this.selectList.map(item => {
          //将其格式{value：'NewYork'}变成['NewYork'],方便使用indexOf进行判断
          return (item = item.value);
        });

        //过滤出newList里面需要显示的数据
        newList = newList.filter(item => {
          //当前下拉框的选中的数据需要显示
          //val就是当前下拉框选中的值
          if (val == item.value) {
            return item;
          } else {
            //再判断在arr这个数组中是不是有这个数据，如果不在，说明是需要显示的
            if (arr.indexOf(item.value) == -1) {
              return item;
            }
          }
        });

        //返回Options显示数据
        return newList;
      };
    }
  }

Throughout showCityList, the only variable is selectList, as long as the value selectList has changed, it will trigger the re-calculation of the property, so as to ensure both the Select select an option, or increase the drop-down box, or delete the drop-down box will let each drop down box in the Option newList be regenerated, so as to achieve a plurality of repeated selection function can not select the same data.

to sum up

1. Initial write a blog, I feel writing is very long-winded, well I do not bother to change, so be it.
2. The property is used to calculate the feeling of writing this feature is very convenient.
3. The calculation of ancestral property, delicious! ! ! !