Madeas
@Madeas
UX/UI designer | Frontend developer

Как добавить активный класс по клику кнопки?

Добрый день!
В vue еще новичок, поэтому прошу у вас помощи и совета.

Задача:
1. добавить по клику на кнопку активный класс блоку
2. при повторном клике на кнопку, или в другой части body, скрыть блок (убрать класс)

Условия:
1. Есть кнопка, имеющая такую структуру:
<button id="toggle" type="button" @click="show"></button>


2. Скрытый блок:
<div id="bar" :class="active: isActive"></div>

По моим предположениям событие @click="show" должно активировать :class="active: isActive". Но я не понимаю как совместить кнопку и блок.

Наработка:
  • Вопрос задан
  • 103 просмотра
Решения вопроса 3
potapchino
@potapchino
во-первых не
:class="active: isActive"
а
:class="{active: isActive}"

во-вторых вы же вкурсе что у вас там два инстанса? если да, то нужно вот так сделать
const barVM = new Vue({
  el: '#bar',
  data: {
    isActive: false
  }
})

new Vue({
  el: '#toggle',
  methods: {
    show: function() {
      barVM.isActive = true
    }
  }
})
Ответ написан
ArchiTawer
@ArchiTawer
"Ok, Google" и все твои проблемы решены
для начала в один инстанс перенести всё
data: function() {
  return {
    isActive: false
  }
},
methods: {
    show: function() {
      this.isActive = true
    },
  }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы