javascript - Vue2 Collapse - 在事件时将类添加到 v-collapse-wrapper

Question

我正在使用以下模块:https://roszpun.github.io/vue-collapse/#/

我似乎无法弄清楚如何正确地将类添加到包装元素，因为我首先考虑在 onStatusChange 上执行此操作，然后绑定(bind)一个类，但由于这是一个事件，我不熟悉如何我会将其添加到事件来源的元素上。

我首先尝试了以下方法:

v-on:onStatusChange="activateClass" v-bind:class="{active:form.classActive}"

然后在我的数据中只有一个 active:false 和以下方法代码:

activateClass:function(vm){
    this.form.classActive = vm.status;
},

虽然这确实向元素“添加”了一个类，但它对所有元素都这样做，所以我目前无法真正弄清楚如何专门为其中一个折叠组执行此操作。

我尝试联系作者，但即使他阅读了我的消息，我也没有收到有关我的问题的回复。

因此，如果有人可以帮助我或引导我朝正确的方向前进，那就太棒了!

预先感谢您提供更多信息。

编辑:

目前按照以下方式进行操作，可能是一种残酷的尝试，但这实际上似乎比连续重新定义元素要好一些。

我为元素上的 h3 赋予以下属性:

v-on:click="activateClass($event)"

然后使用以下函数来切换类:

activateClass:function(event){
    event.target.parentElement.classList.toggle("active");
},

所以这可能只是普通的 JavaScript，它可能不是最好的解决方案，但对于这个它是有效的。如果有人有更好的 VueJS 解决方案，并且不需要大量重复使用的代码，那么我很乐意接受此更改!

编辑2:

由于我需要其他点击事件来触发它，所以我必须返回到 v-on:onStatusChange="activeClass"并进行修改，以便它更改实际节点的类名而不是在点击事件上添加/切换它。

这使得它与整个模块更加兼容。

activeClass:function(e){
    if(true == e.status){
        return e.vm.nodes.toggle.className = "v-collapse-toggler active";
    }else{
        return e.vm.nodes.toggle.className = "v-collapse-toggler";
    }
},

Answer 1

怎么样？我使用 ref 属性来选择特定的折叠。

模板:

<div>
    <v-collapse-wrapper ref="toggleFirst" v-on:onStatusChange="activateClass('toggleFirst', 0)" v-bind:class="{active:form[0].classActive}">
      <div class="header" v-collapse-toggle>
          Click me to toggle content
      </div>
      <div class="my-content" v-collapse-content>
          This is hiddend content
      </div>
    </v-collapse-wrapper>
    <br/>
    <v-collapse-wrapper ref="toggleSecond" v-on:onStatusChange="activateClass('toggleSecond', 1)" v-bind:class="{active:form[1].classActive}">
      <div class="header" v-collapse-toggle>
          Click me to toggle content
      </div>
      <div class="my-content" v-collapse-content>
          This is hiddend content
      </div>
    </v-collapse-wrapper>
  </div>

脚本:

import Vue from 'vue'
import VueCollapse from 'vue2-collapse'

// Loading the plugin into the Vue.
Vue.use(VueCollapse)

export default {
  name: 'App',
  data () {
    return {
      form: [
        { classActive: false },
        { classActive: false }
      ]
    }
  },
  methods: {
    activateClass:function(refName, index){
      this.form[index].classActive = this.$refs[refName].status
    }
  }
}