Vuejs | Добавить/удалить класс родительскому элементу

Question

На проекте используется bootstrap-vue.js. Есть такая структура:

<div class="faq-container__item">
    <b-button v-b-toggle.collapse-1 @click="openItem">
    <h4 class="h4" >текст</h4>
    </b-button>
    <b-collapse id="collapse-1" class="mt-2">
    <div>
    <p class="card-text">текст</p>
    </div>
    </b-collapse>
</div>
<div class="faq-container__item">
    <b-button v-b-toggle.collapse-2 @click="openItem">
    <h4 class="h4" >текст</h4>
    </b-button>
    <b-collapse id="collapse-2" class="mt-2">
    <div>
    <p class="card-text">текст</p>
    </div>
    </b-collapse>
</div>

Нужно по клику на кнопку добавить родительскому элементу (faq-container__item) класс open. Делаю так:

data() {
  return {
    openItem: function() {

      $('.btn').parent().toggleClass("open")

    }
  }
}

Класс open добавляется сразу все существующим faq-container__item. Как сделать чтобы класс добавлялся только родительскому элементу?

Answer 1

В Vue компоненте(экземпляре) есть свойство methods. Там и необходимо описывать методы.

const app = new Vue({
  el: '#app',
  data() {
    return {
      is_active: false,
    }
  },
  mounted() {

  },
  methods: {
    openItem() {
      this.is_active = !this.is_active;
    },
  },
});

.active{
 width: 100px;
 height: 100px;
 background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <template>
    <div 
      class="faq-container__item"
      :class="{active: is_active}"
      >
      <h4 class="h4">
        <button 
          @click="openItem"
         >
          Текст
        </button>
      </h4>
    </div>
  </template>
</div>

Ответ на ваш вопрос:

https://stackoverflow.com/questions/44067614/how-to-get-parent-of-clicked-element-in-vue-js

БЛОГ НА HUSL

Vuejs | Добавить/удалить класс родительскому элементу

Ответы (1 шт):