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

Question

[Andrej Sharapov]

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

Наработка:

Comments

[Ярослав Иванов]

Два инстанса вью?

ДВА ИНСТАНСА ВЬЮ????

В консоле читай ошибки. После прочтения ещё раз мой комменты почитай и сделай выводы.

[Andrej Sharapov]

Ярослав Иванов, консоль ничего не пишет, а ваши комментарии не несут никакой смысловой нагрузки)

[Igor Ustyugov]

Не знаю как в Vue, но выглядит очень сложно... А вообще

document.getElementById('bar').classList.toggle('active');

[Ярослав Иванов]

Andrej Sharapov, а стоп. Я проглядел.

return {
// здесь какое-то событие
}

Ты серьёзно?) думаешь что два слеша за тебя все сделают? Где код?

[Артур Карапетян]

Andrej Sharapov, сейчас ты, грубо говоря, два приложения поднял, что слишком жоска.

[Ярослав Иванов]

Igor Ustyugov, спасибо не надо.

[Andrej Sharapov]

Ярослав Иванов, вот я и не понимаю, что там должно быть)) был бы код, я бы сюда не писал -__-

[Ярослав Иванов]

Andrej Sharapov, ну у тебя есть свойство isActive. Меняй ему с фолс на тру.

[alex]

Ярослав Иванов, паря кажись вообще не понимает что происходит

Answer 1

[0xD34F]

https://jsfiddle.net/cjf14ek3/

Comments

[Andrej Sharapov]

спасибо

Answer 2

[alex]

во-первых не
: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
    }
  }
})

Comments

[Andrej Sharapov]

спасибо. оберну в общий инстанс, так будет лучше.

Answer 3

[Артур Карапетян]

для начала в один инстанс перенести всё

data: function() {
  return {
    isActive: false
  }
},
methods: {
    show: function() {
      this.isActive = true
    },
  }

Comments

[Andrej Sharapov]

так this же будет в случае, если кликать на блок, а не на стороннюю кнопку. разве нет?

[Артур Карапетян]

Andrej Sharapov, this в методе обращается к инстансу vue

[Andrej Sharapov]

Артур, тогда да, лучше обернуть в общий контейнер