Не показывать в списке select выбранные значения vue.js?

Question

[Dauren S]

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

Вопрос: Как в списке выбора пользователей при добавлении новой строки не показывать тех , кто уже был выбран?

Answer 1

[0xD34F]

Вместо того, чтобы зашивать в шаблон варианты выбора, делаете массив и отдаёте его в v-for, предварительно прогнав через функцию-фильтр, где будут отброшены уже выбранные варианты (кроме текущего):

<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/

Comments

[Dauren S]

А не подскажешь как в массив
options: [
{ label: 'Иванов', value: 'ivanov' },
{ label: 'Петров', value: 'petrov' },
{ label: 'Титарев', value: 'titarev' },
]
положить данные из базы сотрудников?mysql

[Dauren S]

Спасибо большое!

[0xD34F]

Dauren, если коротко - сделать ajax-запрос в хуке created, например... Если говорить подробно, то:

1. Неясно, что у вас тут вызывает затруднение. Нужно больше информации.

2. Если абстрагироваться от самих данных - нет ни малейшей связи с исходным вопросом.

=> 3. Вам следует задать отдельный вопрос, где максимально подробно изложить суть своей проблемы.

[Dauren S]

0xD34F, Спасибо.