Блог

Я пытаюсь создать пользовательскую директиву для выполнения функции при нажатии на элемент. Я не могу заставить это работать, я просмотрел документацию по пользовательским директивам, и даже копирование примеров непосредственно оттуда не работает.

Я использую шаблоны одного файла и локальные директивы. Вот шаблон:

 <template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <button v-test:click="clicked">Click me</button>
      </div>
    </div>
  </div>
</template>
  

И вот сценарий:

 <script>
  export default {
    name: 'App',
    components: {
    },
    directives: {
      test: {
        bind(el, binding) {
          const type = binding.arg;
          const fn = binding.value;
          el.addEventListener(type, fn)
        }
      }
    },
    methods: {
      clicked() {
        alert('text');
      }
    }
  }
</script>
  

Я пытался использовать синтаксис Vue 3 (beforeMount, а не bind), а также глобальные директивы, но эти вещи, похоже, тоже не работают. Кто-нибудь знает, что я делаю не так?

Окно предупреждения появится сразу после загрузки страницы, если я добавлю круглые скобки к значению, переданному в v-test. В любом случае, при нажатии кнопки ничего не происходит.

Vue3 изменил синтаксис директив. Новый синтаксис

 bind → beforeMount
inserted → mounted
beforeUpdate (new)
update (has been removed)
componentUpdated → updated
beforeUnmount (new)
unbind -> unmounted