Question

我有一个要素。我想使用一个@click添加3种不同的切换：

切换隐藏的嵌套<p>
切换<i>元素
切换父框(.faq-box)

在vue.js中执行此操作的最佳方法是什么？

我删除了一些数据对象，等等，这些数据对象仅适用于所需元素。

这是HTML元素：

<div v-for="item in faqItems" v-bind:class="[isActive ? 'faq-box-white' : 'faq-box-warmgrey']" class="box faq-box is-shadowless has-py-3" @click="toggleFaq($event)">
        <div class="columns is-mobile">
            <div class="column">
                <li class="">
                 <span class="is-size-7-mobile has-text-weight-semibold collapse">
                                            {{ item.question }}
                </span>
                <p class="is-size-7 has-text-weight-normal is-hidden has-pt-4" v-html="item.answer">
                </p>
                </li>
            </div>
            <div class="column is-1 has-p-1">
                <i class="fa fa-caret-down is-pulled-right has-pt-3"></i>
            </div>
        </div>
    </div>

new Vue({
    el: '#appName',
    data: {
        isActive: true,
        },
    methods: {
        toggleFaq: function(event) {

            let el = event.target.parentNode.children[1];
            console.log(el);

            // console.log(document.querySelector("i").classList);
            let el_icon = document.querySelector("i").classList;
            console.log(el_icon);
                // el_icon.classList.toggle("fa-caret-up");
                // el_icon.classList.toggle("fa-caret-down");

            if(el.classList.contains('is-hidden')){
                el.classList.remove('is-hidden')
            } else {
                el.classList.add('is-hidden')
            }

            el = event.target.parentNode.children[0];
            if(el.classList.contains('collapse')){
                el.classList.remove('collapse')
            } else {
                el.classList.add('collapse')
            }

            //toggle background color
            if(this.isActive){
                this.isActive = false;
            }else{
                this.isActive = true;
            }

        },

Answer 1

如@RoyJ所述，每个FAQ都需要处于活动状态。您可以通过在FAQ框中添加一个布尔标志来实现此目的。

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>

一个@click事件，具有多个切换

1 个答案: