Vue Пользовательские директивы: как разделить переменную между хуками?

Question

Я хочу поделиться переменной между хуками пользовательской директивы.

Пример:

Vue.directive('demo',{
  bind: function(el, binding, vnode) {
    const index = setInterval(/* ... */) //I have an "index" here
  },
  unbind: function(el, binding, vnode) {
    clearInterval(index) // I want to use "index" here
  }
})

Как я могу передать свое значение из bind в unbind?

PS На мой взгляд, единственный обходной путь - изменить el таким образом, чтобы добавить html -attribute "my-custom-index" в bind и прочитать его в unbind. Но это так хаки ...

Answer 1

То, где находится определение директивы, должно быть в модуле JS. Так почему бы не определить свои переменные в модуле. Затем прочтите и запишите его в любом месте области модуля.

например:

let va = 9
Vue.directive('demo',{
  bind: function(el, binding, vnode) {
    va = va + 1
    const index = setInterval(/* ... */) //I have an "index" here
  },
  unbind: function(el, binding, vnode) {
    console.log(va)
    clearInterval(index) // I want to use "index" here
  }
})

Или вы можете использовать this.va = 'covid-19' и var va = this.va.

Или el.dataset .

Answer 2

Кажется, это способ go использовать html -атрибуты:

Vue.directive('demo',{
  bind: function(el, binding, vnode) { 
    //save
    el.setAttribute('x-my-attr', index);
  },
  unbind: function(el, binding, vnode) {
    //read
    const index = el.getAttribute('x-my-attr'); // The value is a string!
  }
})