사용자 지정 지시문에서 v-if 지시문 시뮬레이션

사용자 지정 지시문에서 v-if 지시문 시뮬레이션

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);
    }
  }
};

하지만 이 옵션은 나에게 맞지 않습니다.컴포넌트 생성을 중단하지 않습니다.

이 코드는 요소를 DOM에서 제거하지만 구성 요소 인스턴스를 삭제하지는 않습니다.

확인은 안 했는데 의사 선생님한테 보면 이렇게 돼 있을 거예요.
아마 나중에 좀 더 구체적이고 정확한 답을 가지고 편집할 것이다.

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 이외에는 읽기 전용으로 취급하고 수정하지 마십시오.후크 간에 정보를 공유해야 하는 경우 요소의 데이터 집합을 통해 정보를 공유하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/53897909/simulate-v-if-directive-in-custom-directive