How can I toggle specific v-if divs within a v-for loop in Vue.js?

Question

How can I toggle specific v-if divs within a v-for loop in Vue.js?

I would like to implement a feature where each post in a loop has a dropdown menu that can be shown/hidden when clicked:

<div v-for="(post, index) in posts" :key="index" >
    <div v-on:click.prevent="toggleDropDown(post)">Show/hide menu
    </div>
   <div  v-if="post.showDropDown"> 
      <ul class="menu">         
          <li><a href="#" >Edit</a></li>
          <li><a href="#" >Delete</a></li>
      </ul>
    </div>
    <div>
         {{post.body}}

    </div> 
</div>

Here is the method I am using:

toggleDropDown(post) {
   if (!post.showDropDown) {     
      post.showDropDown =true;   
   } else {       
      post.showDropDown =false;  
   }
  },

However, this implementation is not working as expected. When I click on Show/hide menu, nothing happens.

It should be noted that the data for posts is fetched from the server and the post object does not contain a showDropDown field initially.

If I use v-if="post.showDropDown", all menus open/close together. This behavior is not desired.

How can I correct this issue?

javascript vue.js

Answer 1

Answer №1

There could potentially be a Vue reactivity issue at play here. One possible solution is to utilize Vue.set

Consider modifying your HTML code to pass the index variable instead of post

<div v-on:click.prevent="toggleDropDown(index)">Show/hide menu
</div>

Then, in your JavaScript:

toggleDropDown(index) {
 if (!this.posts[index].showDropDown) {
    this.$set(this.posts[index], 'showDropDown', true)
 } else {       
    this.$set(this.posts[index], 'showDropDown', false)  
 }
}

If this approach doesn't resolve the issue, you can also try creating a deep copy using JSON.parse(JSON.stringify())

toggleDropDown(index) {
  this.posts[index].showDropDown = !this.posts[index].showDropDown
  this.posts = JSON.parse(JSON.stringify(this.posts))
}

Answer 2

There could potentially be a Vue reactivity issue at play here. One possible solution is to utilize Vue.set

Consider modifying your HTML code to pass the index variable instead of post

<div v-on:click.prevent="toggleDropDown(index)">Show/hide menu
</div>

Then, in your JavaScript:

toggleDropDown(index) {
 if (!this.posts[index].showDropDown) {
    this.$set(this.posts[index], 'showDropDown', true)
 } else {       
    this.$set(this.posts[index], 'showDropDown', false)  
 }
}

If this approach doesn't resolve the issue, you can also try creating a deep copy using JSON.parse(JSON.stringify())

toggleDropDown(index) {
  this.posts[index].showDropDown = !this.posts[index].showDropDown
  this.posts = JSON.parse(JSON.stringify(this.posts))
}

How can I toggle specific v-if divs within a v-for loop in Vue.js?

Answer №1

Similar questions

Having trouble implementing showLoaderOnConfirm feature in SweetAlert2

What are the steps for skipping, sorting, and limiting with dynamoose?

Visualizing network graphs using JavaScript

Subfolder is not generating the batch file

Issue encountered while retrieving information from XML file through AJAX

AngularJS' $rootScope is experiencing issues with creating internal variables

Using the on-change event with a textfield can help ensure that the field is cleared if the min-date condition is not met

Creating an installation package for an Electron application on Windows

Ways to compel Capacitor Application to reload through code

The React Component has been displayed on the screen a total of 5 times within the Ionic

The POST method in Node JS request-promises does not properly handle string inputs

CSS3 Perspective Issue: Solutions for Fixing

Setting up Laravel with pjax

Imitate the function of the tab key

The battle of promises versus async await in Koa middleware

The functionality of CKEditor is not compatible with PopUp windows

Using jQuery to replace the content of a div with a delay?

JQuery AJAX not retrieving data after $.post request

Adding a shadow to a 3D model with Threebox

Merge two scripts together