Очистить от options Select в vue.js в новой строке?

Question

[Dauren S]

<div id="app">
  <h1>Add user</h1>
  <div v-for="(user, index) in users">
    <select v-model="user.title"  @change="changeUser">
      <option value="">Выбрать</option>
      <option v-for="o in getOptions(index)" :value="o.id" v-text="o.title"></option>
    </select>
    <select v-model="user.weight" >
    <option value="">Выбрать</option>
      <option v-for="o in getOptions2(index)" :value="o.id" v-text="o.title"></option>
    </select>

    <button @click="deleteUser(index)">
      delete
    </button>
  </div>

  <button @click="addUser" :disabled="users.length >= options.length">
    New User
  </button>

  <pre>{{ users.title }}</pre>
  <pre>{{ percentTotal }}</pre>

</div>

new Vue({
  el: '#app',
  data: {
    users: [{ name: '', percent: '' }],
    options: [
      { title: '', id: '' },

    ],
    options2: [
      { title2: '', id2: '' },
    
    ]
  },
  methods: {
    getOptions(index) {
      return this.options.filter(o => this.users.every((u, i) => u.title !== o.id || i === index));
    },
    getOptions2(index) {
      return this.options2;
    },
    addUser(index) {
      this.users.push({ title: '',percent:'' });
      this.users.weight='';
      
    },
    changeUser()
    {
    	var vm = this
    		 fetch('https://jsonplaceholder.typicode.com/photos')
      .then(function (response) {
        return response.json()
      })
      .then(function (data) {
        vm.options2 = data
      })
    },
    deleteUser(index) {
      this.users.splice(index, 1);
      if (this.users.length === 0) {
        this.addUser();
      }
    },
    
  },

   created: function () {
    // Alias the component instance as `vm`, so that we  
    // can access it inside the promise function
    var vm = this
    // Fetch our array of posts from an API
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(function (response) {
        return response.json()
      })
      .then(function (data) {
        vm.options = data
      })
  },
   computed: {
    percentTotal() {
      return this.users.reduce((acc, user) => acc + parseInt(user.percent, 10), 0)
    },
     
  },
 
});

Вопрос: как при добавлении новой строки очистить 2 селект, только у новой строки?

Comments

[0xD34F]

ЧТО. ЗНАЧИТ. "ОБНУЛИТЬ".

???????????????????????????????????????????????????????

[Dauren S]

0xD34F, очистить от options

[0xD34F]

Dauren, замечательно - вы вопрос подправьте соответствующим образом, а то есть двусмысленность: очистить в смысле обнулить значение, и то что вы выше написали. Заодно подумайте (и добавьте в текст вопроса результат своих размышлений), что должно быть с селектами в предыдущих строках - у них у всех ведь одни и те же options, так что при удалении options везде всё пропадёт, все вторые селекты станут пустыми. Должно ли так быть? Не уверен.

[Dauren S]

0xD34F, а не подскажете как в методе changeUser получить значение выбранного option?

Answer 1

[0xD34F]

Не надо ничего очищать. Пусть у каждого элемента будут собственные options. В шаблоне второго селекта меняете
v-for="o in getOptions2(index)" на v-for="o in user.options"; в обработчик change первого селекта передаёте текущий объект: @change="changeUser(user)", и соответственно, полученные данные кладёте в этот объект вместо options2 (их просто вырезаете):

changeUser(user) {
  fetch('https://jsonplaceholder.typicode.com/photos')
    .then(r => r.json())
    .then(d => this.$set(user, 'options', d));
},

Comments

[Dauren S]

Огромное спасибо!