vue.js - remove option from second select if already selected [Ordered multiple selection]

Question

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/

Answer 1

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