Vue3. Как получить доступ к функции из директивы?

Question

cihone8122 @cihone8122

Vue3. Как получить доступ к функции из директивы?

Пример кода:

<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app">
  <button v-test>click me</button>
</div>

<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
<script>
(function () {
  'use strict';

  const App = {};

  const TestDirective = {
    data() {
      return {
        someData: [123, 456]
      }
    },
    methods: {
      helloMethod() {
        console.log('hello from method!');
      }
    },
    mounted() {
      // ↓↓↓ Вот тут появляется ошибка "Uncaught TypeError: Cannot read property 'helloMethod' of undefined"
      this.helloMethod()
      // ↑↑↑

      console.log(this.someData);
    }
  };

  const app = Vue.createApp(App);
  app.directive('test', TestDirective);
  app.mount('#app');
})();
</script>
</body>
</html>

При запуске этого кода в консоли выводится ошибка:

Uncaught TypeError: Cannot read property 'helloMethod' of undefined

Причина вроде бы понята - переменная this неопределена.
Но тогда как получить доступ к функции helloMethod и локальной переменной someData?

Вопрос задан более трёх лет назад
299 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

3 комментария

cihone8122 @cihone8122 Автор вопроса
Вы про аргумент binding?

// ... mounted(el, binding, vnode) { binding.dir.methods.helloMethod(); console.log(binding.dir.data().someData); } // ...

Да, так всё работает, я просто думал есть более элегантный способ.

Но появляется дополнительный вопрос:
Как изменить какие-нибудь данные в блоке data?
Например хочу добавить в массив someData новый элемент, что бы он стал:
[123, 456, 789]
Как такое можно сделать?
Написано более трёх лет назад
cihone8122 @cihone8122 Автор вопроса
Дополнительный вопрос снимается. data просто ненужно объявлять как функцию

// ... data() { return { someData: [123, 456] } }, // ...

// ... data: { someData: [123, 456] }, // ...

Тогда можно будет сделать
binding.dir.data.someData.push(789);

Вот только уверенности в том, что всё сделанно правильно - нет))
Написано более трёх лет назад
profesor08 @profesor08 Куратор тега JavaScript

cihone8122, просто задай себе вопрос, а оно тебе надо? Не проще ли сделать это с помощью некоего дополнительного компонента, который будет делать все, что нужно, и в который ты поместишь любой свой компонент?

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

4 комментария

cihone8122 @cihone8122 Автор вопроса

если this = undefined, то какой ещё this.methods? Будет же ошибка "Cannot read property 'methods' of undefined"

Написано более трёх лет назад
black1277 @black1277

С чего бы вдруг this был undefined? В данном случае this указывает на TestDirective, у него есть свойство methods, у которого есть функция helloMethod(). Поэтому внутри mounted() нужно вызывать так this.methods.helloMethod() , а не так this.helloMethod(). Кстати, this.someData действительно undefined

Написано более трёх лет назад
cihone8122 @cihone8122 Автор вопроса

black1277, а вы запустите код из моего примера и сами всё увидите.

Написано более трёх лет назад
black1277 @black1277

Насколько я понял при создании своей директивы в Vue вы можете использовать только один из разрешенных методов: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted. Запихнуть свои методы, вроде data() и methods: { helloMethod()} видимо не получится.
Hook Functions

Написано более трёх лет назад