Почему не работает реактивность?

Question

[Николай]

Все вроде лаконично, но после первого рендеринга v-if при изменении isActive ничего не происходит.

<script src="https://unpkg.com/vue"></script>

<div
  id="search"
  class="search"
  @mouseenter="toggle"
  @mouseleave="toggle"
>
  <span v-if="!isActive">a</span>
  <span v-else>b</span>
  <input
    type="text"
    class="search__input"
    placeholder="Это инпут">
</div>

new Vue({
  el: '#search',
  data: {
    isActive: false
  },
  methods: {
  	toggle: () => {
    	this.isActive = !this.isActive;
    }
  }
})

:active, :hover, :focus {
  outline: none;
  outline-offset: none;
}
.search {
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  display: inline-block;
}
.search:hover, .search-active {
  border-bottom: 1px solid blue;
}
.search__input {
  background: transparent;
  border: none;
}

Answer 1

[Nikita Velko]

methods: {
  toggle() {
    this.isActive = !this.isActive;
  }
}

Поменяйте стрелочную функцию toggle: () => { на метод toggle() { и тогда все заработает.

P.S. Откуда вы все вообще решили, что в методах компонента нужно писать стрелочные функции? :)
Просто вы не первый с такой проблемой. Ощущение, будто все насмотрелись уроков по ES6 и стали бездумно писать стрелочные функции там, где они вовсе не нужны.

Answer 2

[0xD34F]

Потому что this внутри метода toggle - это не экземпляр vue. Не надо всюду пихать стрелочные функции.

Замените toggle: () => { на toggle() {.

Ну или (осторожно, говнокод)...

...перед new Vue добавьте const vm =; в toggle, соответственно, замените this на vm.