無法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(); 
     }); 
    } 
}) 

我不確定，那第二個代碼的作品，但它會是這樣的。