Задать вопрос
Madeas
@Madeas
UI / UX Designer, Frontend Developer
vue

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

Добрый день!
В 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". Но я не понимаю как совместить кнопку и блок.

Наработка:
  • Вопрос задан
  • 4960 просмотров
9 комментариев
Подписаться 1 Простой 9 комментариев
Решения вопроса 3
0xD34F
@0xD34F Куратор тега Vue.js
https://jsfiddle.net/cjf14ek3/
Ответ написан
1 комментарий
1 комментарий
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
    }
  }
})
Ответ написан
1 комментарий
1 комментарий
@architawr
"Ok, Google" и все твои проблемы решены
для начала в один инстанс перенести всё
data: function() {
  return {
    isActive: false
  }
},
methods: {
    show: function() {
      this.isActive = true
    },
  }
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend developer (middle/senior)
//stablecode
от 210 000 ₽
Senior Frontend VueJS (частичная занятость)
Онград+
от 125 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Специалист по работе с данными MySQL
23 апр. 2024, в 16:10
1500 руб./в час
Разработать модуль для flutter приложения
23 апр. 2024, в 16:05
3000 руб./за проект
Нужен таргетолог нашего сайта
23 апр. 2024, в 15:57
10000 руб./за проект
Ещё заказы