VueJS Tutorial: Revealing the Nearest Hidden Element in a List of Items

Question

VueJS Tutorial: Revealing the Nearest Hidden Element in a List of Items

Is there a way to toggle the visibility of the nearest div element by clicking a button in vue?

Lets imagine I have a collection of items, each containing hidden information.

<ul>
   <li v-for="item in items" :key="item.id">
     <div>
         <p>{{item.text}}</p>
         <button @click="showDetails(item)">Show details</button>
         <div class="details" :class="isVisible ? activeClass : 'hidden'">Some hidden details</div>
     </div>
   </li>
</ul>

Then I implement:

data() {
   return {
      items: [ // list of item objects here]
      isVisible: false,
      activeClass: 'is-visible'
  }
},
methods: {
   showDetails(item) {
       this.isVisible = item;
   }
}

Currently, when I click on a "showDetails" button, all divs with the class .details open and acquire the .is-visible class. However, I only want the closest div related to the item to be shown. It seems like it should be simple, but I can't get it to function properly.

How can I make that happen?

javascript vue.js vuejs2

Answer 1

Answer №1

give this a shot

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      <div>
        <p>{{item.text}}</p>
        <button @click="displayDetails(index)">Display details</button>
        <div class="details" :class="index == activeIndex ? activeClass : 'hidden'">Some hidden information</div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      activeClass: 'is-visible',
      activeIndex: null
    };
  },
  methods: {
    displayDetails(index) {
      this.activeIndex = index;
    }
  }
};
</script>

Answer 2

give this a shot

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      <div>
        <p>{{item.text}}</p>
        <button @click="displayDetails(index)">Display details</button>
        <div class="details" :class="index == activeIndex ? activeClass : 'hidden'">Some hidden information</div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      activeClass: 'is-visible',
      activeIndex: null
    };
  },
  methods: {
    displayDetails(index) {
      this.activeIndex = index;
    }
  }
};
</script>

Answer 3

Answer №2

To enhance readability, consider creating a new component specifically for list items that holds all the necessary logic within itself. Here's an example:

// ListItem.vue
<template>
     <div>
         <p>{{text}}</p>
         <button @click="toggleVisibility">Show details</button>
         <div class="details" v-show="isVisible">Some hidden details</div>
     </div>
</template>

<script>
props: {
    text: String
},
data() {
    return {
      isVisible: false
  }
},
methods: {
  toggleVisibility() {
    this.isVisible = !this.isVisible
  }
}

</script>

Then in your parent component:

<ul>
   <li v-for="item in items" :text="item.text" :key="item.id" is="list-item" /></li>
</ul>




data() {
   return {
      items: [ // include multiple item objects here]
  }
}

Answer 4

To enhance readability, consider creating a new component specifically for list items that holds all the necessary logic within itself. Here's an example:

// ListItem.vue
<template>
     <div>
         <p>{{text}}</p>
         <button @click="toggleVisibility">Show details</button>
         <div class="details" v-show="isVisible">Some hidden details</div>
     </div>
</template>

<script>
props: {
    text: String
},
data() {
    return {
      isVisible: false
  }
},
methods: {
  toggleVisibility() {
    this.isVisible = !this.isVisible
  }
}

</script>

Then in your parent component:

<ul>
   <li v-for="item in items" :text="item.text" :key="item.id" is="list-item" /></li>
</ul>




data() {
   return {
      items: [ // include multiple item objects here]
  }
}

Answer 5

Answer №3

Keep track of the visibility status by storing it within the "item"

<ul>
   <li v-for="item in items" :key="item.id">
     <div>
         <p>{{item.text}}</p>
         <button @click="toggleVisibility(item)">Toggle Visibility</div>
         <div class="details" :class="item.isVisible ? activeClass : 'hidden'">Some hidden details</div>
     </div>
   </li>
</ul>




data() {
   return {
      items: [ // list of item objects]
      isVisible: false, 
      activeClass: 'is-visible'
  }
},
methods: {
   toggleVisibility(item) {
       item.isVisible = !item.isVisible;
       this.$forceUpdate();
   }
}

Answer 6

Keep track of the visibility status by storing it within the "item"

<ul>
   <li v-for="item in items" :key="item.id">
     <div>
         <p>{{item.text}}</p>
         <button @click="toggleVisibility(item)">Toggle Visibility</div>
         <div class="details" :class="item.isVisible ? activeClass : 'hidden'">Some hidden details</div>
     </div>
   </li>
</ul>




data() {
   return {
      items: [ // list of item objects]
      isVisible: false, 
      activeClass: 'is-visible'
  }
},
methods: {
   toggleVisibility(item) {
       item.isVisible = !item.isVisible;
       this.$forceUpdate();
   }
}

VueJS Tutorial: Revealing the Nearest Hidden Element in a List of Items

Answer №1

Answer №2

Answer №3

Similar questions

The Quasar application does not eliminate console.log() statements during production builds

Script tags in PHP-Diff are ignored

Adjust the hue of the three.line when a button in three.js is clicked

What is the best way to integrate JavaScript with my HTML command box?

Utilizing Jquery to locate a link inside a Div and displaying it as specified in the HTML

Mongoose parameters do not accept passing an id or element

Is it possible for the Jquery Accordion to retract on click?

Ways to adjust the border color when error helper text is displayed on a TextField

another option besides the nextElementSibling

How can I specify to a Vue application that it will be situated in a subdirectory and have the image paths updated accordingly?

Updating state in Vue by utilizing an array of item values

Using VueJS for Dynamic Class Binding

Which server or cloud hosting provider is the most ideal for my Laravel and Vue.js 2 application?

Issues arise when implementing Django templates in conjunction with jQuery

Is it possible to modify the CSS injected by an Angular Directive?

The functionality of "#button_1" remains unchanged despite using .click() or .hover() methods

Problem with delaying in Jquery's .each method

Assign a value to the Angular directive for the SharePoint People Picker

Implementing a change event upon setting a value to an input element using JavaScript

Managing numerous ajax forms within a single page