Vue2 Collapse - добавить класс в v-collapse-wrapper, когда активен

Question

Я использую следующий модуль: https://roszpun.github.io/vue-collapse/#/

И я не могу понять, как правильно добавить класс к элементу-обертке, поскольку я сначала думал об этом в onStatusChange, чтобызатем связать класс, но поскольку это событие, я не знаю, как добавить его в элемент, из которого произошло событие.

Сначала я попробовал следующее:

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

Имея тогда в моих данных только активный: false и следующий код метода:

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

Хотя это «добавляет» класс к элементам, это делает ВСЕ элементы, поэтому я не могув настоящее время выясняется, как конкретно это сделать для одной из групп свертывания.

Я пытался связаться с автором, но, несмотря на то, что он читает мои сообщения, я не получаю ответ в отношении моих вопросов.

Так что, если бы кто-нибудь мог помочь мне или направить меня в правильном направлении, это было бы просто замечательно!

Заранее спасибо за дополнительную информацию.

Редактировать:

В настоящее времяделать это как following, может быть жестокой попыткой, но на самом деле это работает немного лучше, чем непрерывное переопределение элемента.

Я присваиваю h3 для элемента следующий атрибут:

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

изатем используйте следующую функцию для переключения классов:

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

Так что это может быть просто обычный JavaScript, и это может быть не лучшим решением, но для этого он работает.Если у кого-то есть лучшее решение VueJS, которое не требует много повторного использования кода, то я с радостью приму это изменение!

Edit 2:

As I 'У меня была потребность в других событиях щелчка, чтобы также инициировать его, я должен был вернуться к 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

Нет. Для переключения содержимого, если вам нужен простой метод свертывания, не нужно делать никаких дополнительных сценариев.Вот пример:

Шаблон:

<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/#/

Answer 2

Как насчет этого?Я использую свойство 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
    }
  }
}