如果已选择，则从第二个选择中删除选项 [有序多项选择]

Question

我有选择选项中继器。

我想要的是，当我在第一个选项中选择 johndoe 时，它​​将不再显示在第二个选择选项中。

这是我的html

<div id="app">
  <h1>Vue JS Multiple Fields Repeater</h1>
          <div class="col-sm-6">
            <div class="panel panel-default relative has-absolute" v-for="(field, index) in users.usersRepeater">
              <button @click="addUsersField" type="button">
                Add
              </button>
              <button @click="deleteUsersField(index)" v-if="field != 0" type="button">
                Delete
              </button>
              <div class="panel-body has-absolute">
                <div class="form-group">
                  <label for="users" class="control-label col-sm-3 text-left">Users {{field}}</label>
                    <select :name="'users'+index"
                      class="form-control"
                      id="users">
                        <option value="" hidden>Select User</option>
                        <option value="1">John Doe</option>
                        <option value="2">Mark Doe</option>
                        <option value="3">Mae Doe</option>
                        <option value="4">John Smith</option>
                        <option value="5">Mae Smith</option>
                    </select>
                </div>
              </div>
            </div>
          </div>
</div>

这是我的 vue.js

new Vue({
  el: '#app',
  data: {
    users: {
          usersRepeater: [{ user: '' }]
        }
  },
  methods: {
      addUsersField: function() {
        this.users.usersRepeater.push({
          user: ''
        });
      },
      deleteUsersField: function(index) {
        this.users.usersRepeater.splice(index, 1);
      },
  }
});

这是小提琴 -> https://jsfiddle.net/0e3csn5y/23/

Answer 1

Ok I have this working now. 我喜欢这个问题，因为进行有序选择是一种通用情况。但是，无论如何，对我来说，这并不简单。突破是意识到，当您对选项进行编号时，组件的整个状态可以封装在一个数组中，allUsers。然后，可用的用户和选项将成为基于此数组的计算属性。故事的寓意：让您的商店正确，商店的元素之间没有互动。

我的答案有 130 行。如果没有 Vue，这将有多长时间和多难？令人难以置信。

Stack 想让我发布一些代码，所以这里是计算属性，它生成一个从所有用户数组中按优先级排列的选择数组...

choices(){
    return this.store.allUsers.map((aUser,index)=>{
    if(aUser.selection != null)
        return {idxAllUsers : index, selection: aUser.selection};
    else
        return null;
  })
  .filter(aSelection=>aSelection != null)
  .sort((a,b)=>{return a.selection - b.selection})
  .map(a=>a.idxAllUsers);
},

Answer 2

我发现this one 很有帮助。