Learning how to hide a specific div in Vue.js when another div is clicked

Question

Learning how to hide a specific div in Vue.js when another div is clicked

<template>
 <div v-for="(item ,index) in items" v-if="showing">
                <span @click="showing=false">{{item.name}}</span>
 </div>
</template>
    <script>

            export default{
                       showing:true,
                       items: [
                          {'name':'a'},
                          {'name':'b'},
                          {'name':'c'},
                       ],
            }
    </script>

How can I hide a specific div when clicking on it? **Whenever I try this method, all of them are hidden at once.**

javascript laravel vue.js vuejs2 vue-component

Answer 1

Answer №1

This is my approach:

<template>
   <div v-for="(item,index) in items" v-if="hiddenItems.indexOf(index) < 0">
     <span @click="hiddenItems.push(index)">{{item.name}}</span>
   </div>
</template>
<script>
  export default{
    hiddenItems:[],
    items:[
     {'name':'apple'},
     {'name':'banana'},
     {'name':'carrot'}
    ]
  }
</script>

You can view the implementation here.

Answer 2

This is my approach:

<template>
   <div v-for="(item,index) in items" v-if="hiddenItems.indexOf(index) < 0">
     <span @click="hiddenItems.push(index)">{{item.name}}</span>
   </div>
</template>
<script>
  export default{
    hiddenItems:[],
    items:[
     {'name':'apple'},
     {'name':'banana'},
     {'name':'carrot'}
    ]
  }
</script>

You can view the implementation here.

Answer 3

Answer №2

It's been a while since I worked with Vue, so this code might need some tweaking, but it should give you a general idea.

<template>
    <div v-for="(item, index) in items" v-if="item.shown">
         <span @click="item.shown=false">{{item.name}}</span>
    </div>
</template>
<script>
        export default {
             items: [
                 {'name':'a', shown: true},
                 {'name':'b', shown: true},
                 {'name':'c', shown: true},
             ],
        }
</script>

Answer 4

It's been a while since I worked with Vue, so this code might need some tweaking, but it should give you a general idea.

<template>
    <div v-for="(item, index) in items" v-if="item.shown">
         <span @click="item.shown=false">{{item.name}}</span>
    </div>
</template>
<script>
        export default {
             items: [
                 {'name':'a', shown: true},
                 {'name':'b', shown: true},
                 {'name':'c', shown: true},
             ],
        }
</script>

Answer 5

Answer №3

To avoid using another array to store hidden indexes (like hide :[]):

new Vue({
    el: "#app",
      data: function() {
    return {
      items:[ {'name':'a'}, {'name':'b'}, {'name':'c'} ]
    }
  },
  methods: {
    setHide: function(item) {
      this.$set(item, 'hide', true);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>

<div id="app">
  <div v-for="item in items" :key="item" v-if="!item.hide">
    <span @click="setHide(item)">{{item.name}}</span>
  </div>
</div>

Answer 6

To avoid using another array to store hidden indexes (like hide :[]):

new Vue({
    el: "#app",
      data: function() {
    return {
      items:[ {'name':'a'}, {'name':'b'}, {'name':'c'} ]
    }
  },
  methods: {
    setHide: function(item) {
      this.$set(item, 'hide', true);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>

<div id="app">
  <div v-for="item in items" :key="item" v-if="!item.hide">
    <span @click="setHide(item)">{{item.name}}</span>
  </div>
</div>

Learning how to hide a specific div in Vue.js when another div is clicked

Answer №1

Answer №2

Answer №3

Similar questions

The impact of increasing memory usage in Chrome by modifying global variables

MongoDB: total value of combined fields

Methods for handling asynchronous completion using jQuery

What is the purpose of encoding the Jquery Ajax URL twice?

Issue with Loading.gif not displaying properly in Lightbox 2 after opening each image

When utilizing the `express.static(__dirname)` function in Node.js with Express, the visitor may be directed to an incorrect HTML page

Utilizing JavaScript Event Listener to Identify the Relevant PHP File for Display

Triggering OnClick() more than once may result in the function failing to execute as intended

obtain an inner element within a container using the class name in a div

What is the best way to synchronize the image dimensions and source when dynamically loading images?

Vue Error: The method "reduce" is not a function

Is it possible to use the skip function with GroupBy in SQL?

Encountering issues with implementing Bootstrap modal in Laravel project

Styling sub-table titles in jQuery jTable with proper indentation

Deselect the checkbox that was initially selected when an alternative checkbox option has been chosen

Leveraging AngularJS $promise in conjunction with NgResource

What is the most efficient way to enable seamless communication between sibling components in Vue.js 2?

Mark all checkboxes as checked automatically

Calculating the total sum of values within a JSON array

The optimal time to register for events within the Vue lifecycle