This question has already been answered:

How can I hide an item from the list by clicking on the hide button?

<template> <div> <div class="cards__list" v-if="items.length > 0"> <div class="row"> <div class="col-md-3 mb-3" v-for="item in items" :key="item.id"> <div class="card"> <div class="card-body"> <h5 class="card-title">{{item.title}}</h5> <button type="button" class="btn btn-secondary" @click="hideItem(item.id)">hide</button> </div> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { items: [] } }, created() { this.fetchItems(); }, methods: { fetchItems() { this.loading = true; fetch("/api/articles") .then(res => res.json()) .then(res => { this.loading = false; this.items = res.data; }) .catch(err => console.log(err)); }, hideItem(id) { } } } </script>

Reported as a duplicate by AK ♦ participants, Kirill Korushkin , Community Spirit ♦ May 10 at 13:47 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • To do this, it is not necessary to use vue, you can add a javascript label to the question - and you will have a solution on pure js. You actually, if you don’t need state and reactivity, you can simply hide the element and that's it. And for this, the usual javascript is enough. There is more question - what is meant by hiding - hanging display: none style or visibility: hidden - AK ♦
  • And if you just make display: none, how to do it correctly in this case? - Dima Vleskov
  • one
    add to the item the display: true / false field, and control the visibility of the item using v-if - Dmytryk 5:52 pm
  • Yeah, that's for sure. To style display , to whom slice array ))) - Rustam Gimranov
  • @ RustamGimranov, and to whom neither one nor the other - Dmytryk pm

1 answer 1

 var vm = new Vue({ el: '#content', data: { items: [ { display: true }, { display: true }, { display: true }, { display: true } ] }, }) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="content"> <div v-for="(item, index) in items"> <div v-if="item.display"> {{index}} <button @click="item.display = false">Hide</button> </div> </div> </div>