dauren101
@dauren101
Python, Django ,Vue.js

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

Вопрос: Как в списке выбора пользователей при добавлении новой строки не показывать тех , кто уже был выбран?
  • Вопрос задан
  • 367 просмотров
Решения вопроса 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));
},

https://jsfiddle.net/gs0oenxq/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы