[Vuejs]-One @click event with multiple toggles

by

0👍

✅

As stated by @RoyJ, you need an active state for each FAQ. You can achieve this by adding a boolean flag to the FAQ box items.

new Vue({
  el: '#app',
  data() {
    return {
      items: [{
          question: 'Question 1',
          answer: 'Answer 1',
          active: false
        },
        {
          question: 'Question 2',
          answer: 'Answer 2',
          active: false
        },
        {
          question: 'Question 3',
          answer: 'Answer 3',
          active: false
        },
        {
          question: 'Question 4',
          answer: 'Answer 4',
          active: false
        }
      ]
    }
  }
})
.faq-box {
  background-color: rgba(128, 222, 234, 1);
  width: 200px;
}

.faq-box.active {
  background-color: rgba(197, 225, 165, 1);
}

ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid black;
}

li:last-child {
  border: none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <li v-for="item in items" :class="{ faqBox: true, active: item.active }" class="box faq-box is-shadowless has-py-3" @click="item.active = !item.active">
    <div>
      <span>{{ item.question }}</span>
      <p v-show="item.active" v-html="item.answer"></p>
    </div>
    <i :class="{ fa: true, 'fa-caret-down': item.active, 'fa-caret-up': !item.active }"></i>
  </li>
</div>

Leave a comment