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仅在有条件的情况下适用。例如，如果您需要修改单击的项目（按颜色，下划线等）。但不适合永久删除。

第三，您不需要为阵列中的每个项目手动创建ID。在v-for指令中，除了项目本身之外，您还可以传递其索引，例如v-for =“（item，index）in technicType”。因此，当您调用hideItem方法时，可以将index作为参数传递。 @click =“ hideItem（index）”，这样它将在您的数组中传递当前项目的索引。

最后在Vue实例中，您像这样拼接数组

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

它将删除带有您从html传递的索引的项目。

隐藏选中的元素Vue

1 个答案: