Breaking News: Grepper is joining You.com. Read the official announcement!

click on item in v-for vue

Add Answer

Marta Klaptiuk answered on May 29, 2021 Popularity 9/10 Helpfulness 2/10

answer click on item in v-for vue

related vue v-on:click

related click in vue

click on item in v-for vue

Comment

<template>
  <div id="accordion" class="accordion-container">
    <div
      v-for="(item, index) in items"
      :key="index"
      :class="[
        'accordion',
        { 'is-open': isOpen.includes(index) }
      ]"
    >
      <div class="accordion-header" @click="toggleAccordion(index)">
        {{ item.title }}
        <i v-if="!isOpen.includes(index)" class="fal fa-plus"/>
        <i v-else class="fal fa-minus"/>
      </div>
      <div class="accordion-body">
        <div class="accordion-content">
          {{ item.text }}
          <strong>{{ item.sub }}</strong>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "trial-page",
  data() {
    return {
      items: [
        {
          title: "Accordion 1",
          text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
          sub: "Pellentesque risus mi"
        },
        {
          title: "Accordion 2",
          text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
          sub: "Pellentesque risus mi"
        },
        {
          title: "Accordion 3",
          text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
          sub: "Pellentesque risus mi"
        }
      ],
      isOpen: []
    };
  },
  methods: {
    toggleAccordion(index) {
      if (this.isOpen.includes(index)) {
        this.isOpen = this.isOpen.filter(i => i !== index);
        return;
      }

      this.isOpen.push(index);
    }
  }
};
</script>

<style>
.accordion:not(.is-open) .accordion-body {
  display: none;
}
</style>

Popularity 9/10 Helpfulness 2/10 Language whatever

Source: www.anycodings.com

Tags: click v-for whatever

Link to this answer
Share Copy Link

Contributed on Sep 08 2022

Marta Klaptiuk

0 Answers Avg Quality 2/10

Closely Related Answers

vue v-on:click

Comment

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: cn.vuejs.org

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 06 2022

Dead Dotterel

0 Answers Avg Quality 2/10

click in vue

Comment

<button  @click="setComponent('manage')">manage</button>

Popularity 10/10 Helpfulness 4/10 Language csharp

Source: Grepper

Tags: c# c

Link to this answer
Share Copy Link

Contributed on May 29 2021

Mohamad

0 Answers Avg Quality 2/10

click on item in v-for vue

Contents

More Related Answers

click on item in v-for vue

Closely Related Answers

vue v-on:click

click in vue

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.