Имитация директивы v-if в пользовательской директиве - PullRequest
Новая
       41

Имитация директивы v-if в пользовательской директиве

0 голосов
/ 22 декабря 2018

Мне нужно уничтожить элемент в пользовательской директиве, такой как v-if.(Запретить создание элемента, если условие не выполнено.)

Я пытаюсь это 

export const moduleDirective: DirectiveOptions | DirectiveFunction = (el, binding, vnode) => {
  const moduleStatus = store.getters[`permissions/${binding.value}Enabled`];
  if (!moduleStatus) {
    const comment = document.createComment(' ');
    Object.defineProperty(comment, 'setAttribute', {
      value: () => undefined,
    });
    vnode.elm = comment;
    vnode.text = ' ';
    vnode.isComment = true;
    vnode.context = undefined;
    vnode.tag = undefined;

    if (el.parentNode) {
      el.parentNode.replaceChild(comment, el);
    }
  }
};

Но эта опция мне не подходит.Он не прерывает создание компонента.

enter image description here

этот код удаляет элемент из DOM, но не уничтожает экземпляр компонента.

1 Ответ

0 голосов
/ 24 декабря 2018

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

Vue.directive('condition', {


  inserted(el, binding, vnode, oldVnode){
    /* called when the bound element has been inserted into its parent node
      (this only guarantees parent node presence, not necessarily in-document). */

     if (!test){ el.remove() }
  }


  update(el, binding, vnode, oldVnode ){
    /* called after the containing component’s VNode has updated, but possibly before 
       its children have updated. */

     if (!test()){ el.remove() }
    //or you can try this, changed the vnode
    vnode.props.vIf = test();
  }
}

Иликороче говоря 

Vue.directive('condition', function (el, binding) {
  if (!test){ el.remove() }
})

Помимо el, вы должны обрабатывать эти аргументы только для чтения и никогда не изменять их.Если вам нужно обмениваться информацией между хуками, рекомендуется делать это через набор данных элемента.

...