Question

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

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

我最初尝试了以下内容：

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
    }
  }
}

Answer 2

如果要使用简单的折叠方法，则无需执行任何其他脚本来切换内容。这是示例：

模板：

<template>
    <v-collapse-wrapper>
        <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">
        <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>
</template>

脚本：

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

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

参考：https://roszpun.github.io/vue-collapse/#/

Vue2折叠 - 活动时将类添加到v-collapse-wrapper

2 个答案: