Скрыть отмеченный элемент Vue

Question

У меня есть три массива, и у каждого элемента есть флажок.Мне нужно скрыть каждый отмеченный элемент

<ul class="list" v-for="item in technicType" :key="item.name">// looping array
 <li v-show="hidden">{{item.name}}// show property
   <span><input type="checkbox" :value="item.name" v-model="checked"></span>
 </li>// checkbox
</ul>
<ul class="list" v-for="item in model" :key="item.name">// looping array
  <li>{{item.name}}// array item
    <span><input type="checkbox" :value="item.name" v-model="checked"></span>// checkbox
  </li>
</ul>
<ul class="list" v-for="item in technic" :key="item.name">//looping array
  <li>{{item.name}}// array item
    <span><input type="checkbox" :value="item.name" v-model="checked"></span>// checkbox
  </li>
</ul>

data(){
  return{
    technicType: [],//array i am getting from api
    hidden: true,
    model: [],//array i am getting from api
    technic: [],//array i am getting from api
    checked: []
   }
 }

 hideItem(id){
   this.hidden = id
 }

Мне нужно скрыть отмеченный элемент.Как я могу это реализовать?

Answer 1

Прежде всего, обратите внимание, вы прикрепляете директиву v-for к тегу li, а не к ul.В противном случае он создаст несколько ul вместо нескольких li.

Во-вторых, v-if и v-show подходят только в случае условий.Например, если вам нужно изменить выбранный элемент (по цвету, подчеркиванию и т. Д.).Но не подходит для удаления навсегда.

В-третьих, вам не нужно создавать идентификаторы вручную для каждого элемента в вашем массиве.В директиве v-for, кроме самого элемента, вы также можете передать его индекс, например, v-for = "(item, index) в technicType".Поэтому, когда вы будете вызывать метод hideItem, вы можете передать index в качестве аргумента.@click = "hideItem (index)", чтобы он передавал индекс текущего элемента в вашем массиве.

И, наконец, в экземпляре Vue вы просто склеиваете свой массив следующим образом:

hideItem(index){
this.technicType.splice(index, 1);
}

Itудалит элемент с индексом, который вы передали из HTML.