[Vuejs]-Hide checked element Vue

by

0đź‘Ť

First of all pay attention, you attach v-for directive to li tag, not to ul. Otherwise it will create multiple ul’s instead of multiple li’s.

Second, v-if and v-show are suitable in case of conditions only. For example in case you need to modify clicked item (by color, underlining, etc). But not suitable for removing forever.

Third, you do not need to create ID’s manually for every item in your array. In v-for directive, besides item itself you can also pass its index, like so v-for=”(item,index) in technicType”. So when you’ll be calling hideItem method you can pass index as an argument. @click = “hideItem(index)” so it will pass current item’s index in your array.

And in the end in Vue instance you just splice your array like so

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

It will delete item with index that you passed from html.

Leave a comment