无法html元素添加到父在Vue公司JS指令

Question

我在VUE JS

Vue.directive('customDirective',{ 
    bind(el,binding,vnode){ 
     // need to get the parent 
     // append a div after the input element 
    } 
}) 

一个全球性的指令，我有以下的HTML代码。

<div class="parentDiv"> 
<input type="text" name="firstName" v-customDirective="Some text"/> 
</div> 

<div class="parentDiv"> is loading dynamically via jquery。我需要获取输入标记的父项，并且需要在输入标记后附加一些html。我曾尝试使用parent（），但它显示为父级不是函数。有什么建议么 ？

Answer 1

如果您想要访问父元素，则应该使用inserted挂钩而不是bind。

您可以通过el.parentElement获取父元素。

Answer 2

您可能应该使用vnode和Vue nextTick。

import Vue from 'vue'; 

Vue.directive('customDirective',{ 
    bind(el,binding,vnode){ 
     Vue.bextTick(() => { 
      let parent = vnode.elm.parentElement; 
     }); 
    } 
}) 

如果你想使用parent（）这是jQuery函数，你必须通过jQuery获取元素。

Vue.directive('customDirective',{ 
    bind(el,binding,vnode){ 
     Vue.bextTick(() => { 
      let id = vnode.elm.id; 
      let parent = jQuery('#'+id).parent(); 
     }); 
    } 
}) 

我不确定，那第二个代码的作品，但它会是这样的。