Управление домом цели из директивы vue

Question

Я хочу определить директиву vue, которая переключает отображение всплывающего окна при нажатии. Теперь у меня есть:

toggle.js

export default {
    bind(el, binding) {
        console.log(binding.value); // this is undefined

        el.onclick = function() {
            console.log(binding.value); // this is undefined as well

            // toggle menu element display
        };
    }
};

component.vue

<template>
    <button v-toggle="$refs.menu">
        ...
    </button>
    <div ref="menu">
        ...
    </div>
</template>

<script>
    import Toggle from 'path/to/toggle.js';

    export default {
        name: "Component",
        directives: {
            Toggle
        }
</script>

Внутри функции bind binding.value всегда неопределен, возможно потому, что ссылка на меню еще не готова.Как правильно это сделать?

Answer 1

$refs не будет заполняться во время установки директивы.Вы можете сделать его выражение функцией, которая будет оценивать $refs.menu во время щелчка, а не при настройке директивы.

new Vue({
  el: '#app',
  directives: {
    toggle: {
      bind(el, binding) {
        el.onclick = function() {
          const target = binding.value();

          target.classList.toggle('closed');
        };
      }
    }
  }
});

.closed {
  display: none;
}

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <button v-toggle="() => $refs.menu">
    Button
  </button>
  <div ref="menu">
    Some junk in the menu
  </div>
</div>