Don't show selected values ​​in select list vue.js?

Question

Vue.js

<div id="app">
  <h1>Add user</h1>
  <div v-for="(user, index) in users">
      <select v-model="user.name">
    	<option value="0">Выбрать</option>
    	<option value="ivanov">Иванов</option>
    	<option value="petrov">Петров</option>
    	<option value="titarev">Титарев</option>
    </select>
    <input v-model="user.procent">
  
    <button @click="deleteUser(index)">
      delete
    </button>
  </div>
  
  <button @click="addUser">
    New User
  </button>
  
  <pre>{{ users }}</pre>
  <pre>{{ percentTotal }}</pre>
</div>

new Vue({
  el: '#app',
  data: {
    users: [{ name: '',procent:'' }] 
  },
  methods: {
    addUser: function () {
      this.users.push({ name: '',procent:'' });
    },
    deleteUser: function (index) {
      console.log(index);
      console.log(this.finds);
      this.users.splice(index, 1);
      if(index===0)
      this.addUser()
    },
  
  },
   computed: {
      percentTotal() {
      
      return this.users.reduce((acc, user) => acc + parseInt(user.procent, 10), 0)
      },
 	},
});

Question: How can I not show those who have already been selected in the user selection list when adding a new row?

Answer 1

Instead of sewing choice options into the template, make an array and pass it to v-for, having previously run it through the filter function, where already selected options will be discarded (except for the current one):

<select v-model="user.name">
  <option value="">Выбрать</option>
  <option v-for="o in getOptions(index)" :value="o.value" v-text="o.label"></option>
</select>

getOptions(index) {
  return this.options.filter(o => this.users.every((u, i) => u.name !== o.value || i === index));
},

https://jsfiddle.net/gs0oenxq/