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);
      },
  }
});

这里是小提琴 - ＆gt; 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非常有帮助。

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

2 个答案: