Почему меню не выезжает?

Question

[Август Милович]

Пытаюсь сделать выезжающее меню на vue, а оно не выезжает. Вот код:
Компонент с кнопкой, по нажатию на которую меню открывается (урезано)

<p @click="openLeftMenu">Кнопка</p>

openLeftMenu: function() {
      this.$root.$emit("openLeftMenuBtnClicked");
}

самом меню(соседний компонент)

<transition name="slideLeftMenu">
   <div v-if="isLeftMenuShowed"> //menu </div>

   mounted: function () {
            this.$root.$on("openLeftMenuBtnClicked", function() {
                this.isLeftMenuShowed = true
            })
        }'

//стили
     .slideLeftMenu-enter-active, .slideLeftMenu-leave-active
        transition: .5s ease

    .slideLeftMenu-enter, .slideLeftMenu-leave-to
        transform: translateX(-500px)

    .slideLeftMenu-enter-to, .slideLeftMenu-leave
        transform: translateX(500px)
</transition>

Немного непонято, не реагирует v-if, transition, стили неправильно написал. Если я всё неправильно сделал, напишите пожалуйста хотя бы примерный план того, что надо сделать. В одном компоненте кнопка, открывающая меню, в другом - само меню.

Answer 1

[0xD34F]

Почему не выезжает? Наверное потому, что корневой компонент, и компонент в котором находится меню - это разные компоненты, не там устанавливаете значение свойства isLeftMenuShowed.

В целом - дичь дикая, $root.$on, зачем так, кто вам такое посоветовал? Говорите, что меню и компонент с кнопкой соседи - ну так осуществляйте их взаимодействие через родителя, например.