如果已选择，则从第二个选择中删除选项[订购的多项选择] [英] remove option from second select if already selected [Ordered multiple selection]

问题描述

我有选择选项中继器.

我想要的是，当我在第一个选项选择johndoe时，它不会再显示在第二个选择选项上.

这是我的 html

<h1>Vue JS 多字段中继器</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">添加<button @click="deleteUsersField(index)" v-if="field != 0" type="button">删除<div class="panel-body has-absolute"><div class="form-group"><label for="users" class="control-label col-sm-3 text-left">用户{{field}}</label><select :name="'users'+index"类=形式控制"id="用户"><option value="" hidden>选择用户</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></选择>

这是我的 vue.js

new Vue({el: '#app',数据: {用户:{用户中继器:[{用户:''}]}},方法: {添加用户字段:函数(){this.users.usersRepeater.push({用户:''});},deleteUsersField:函数(索引){this.users.usersRepeater.splice(index, 1);},}});

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

解决方案

好的我有这个工作现在. 我喜欢这个问题，因为进行有序选择是一个通用案例.但是，无论如何，对我来说，这并不简单.突破是意识到，当您对选项进行编号时，组件的整个状态可以封装在一个数组中，allUsers.可用的用户和选择然后成为基于此数组的计算属性.这个故事的寓意:让您的商店正确无误，商店元素之间没有相互作用.

我的答案有 130 行.如果没有 Vue，这会持续多久?脑子进水了.

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

choices(){返回 this.store.allUsers.map((aUser,index)=>{if(aUser.selection != null)返回 {idxAllUsers :索引，选择:aUser.selection}；别的返回空；}).filter(aSelection=>aSelection != null).sort((a,b)=>{return a.selection - b.selection}).map(a=>a.idxAllUsers);},

I had select option repeater.

What I want is that when I selected johndoe at the first option, it will no longer display on the second select option.

here's my 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>

here's my 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);
      },
  }
});

here's the fiddle -> https://jsfiddle.net/0e3csn5y/23/

解决方案

Ok I have this working now. I liked the question because making an ordered selection is a generic case. But, for me anyway, it wasn't straightforward. The breakthrough was realising that, when you number the choices, the whole state of the component could be encapsulated in one array, allUsers. Available users and choices then become computed properties, based on this array. Moral of the story: get your store right, with no interactions between elements of the store.

My answer weighs in at 130 lines. How long and hard would this be without Vue? Mind boggles.

Stack wants me to post some code, so here's the computed property that generates an array of choices made, in order of their priority, from the all users array...

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

这篇关于如果已选择，则从第二个选择中删除选项[订购的多项选择]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！