@dauren101
C++, Java, Python, PHP developer

Не показывать в списке select выбранные значения 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)
	    },
 	},
});

Вопрос: Как в списке выбора пользователей при добавлении новой строки не показывать тех , кто уже был выбран?
  • Вопрос задан
  • 121 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Вместо того, чтобы зашивать в шаблон варианты выбора, делаете массив и отдаёте его в 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));
},

демо
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Страховой Кабинет Нижний Новгород
от 60 000 до 90 000 руб.
от 90 000 до 220 000 руб.
Posh Space Москва
от 160 000 до 180 000 руб.
22 июл. 2019, в 07:20
3000 руб./за проект
22 июл. 2019, в 07:13
150000 руб./за проект
22 июл. 2019, в 01:43
500 руб./в час