Vue2：カスタムディレクティブv-ifと同じ

Question

私はv-ifのようなカスタムディレクティブを作成しようとしています。そのため、要素に渡されるデータが空でない場合にのみレンダリングされます。たとえば、

<div v-if="!_.isEmpty(data.employer)">{{ data.employer.name }}</div> 

これは、data.employerが空でない場合にのみレンダリングされるため、参照エラーが発生しません。私はちょうどv-notEmpty="data.employer"にこれを単純化し、指令内のロジックを実行する指示を作成しようとしていますが、問題は、それが雇用者である参照エラーをスローするように要素がレンダリングされた後にカスタム指示にフックをしているということです未定義。

カスタムディレクティブを実際に作成する前にロジックを実行するv-ifとまったく同じように動作する方法はありますか。これは今まで私が持っていたものです：

Vue.directive('notEmpty', (el, binding) => { 
    if (_.isEmpty(binding.value)) { 
    el.style.display = 'none'; 
    } else { 
    el.style.display = 'initial'; 
    } 
}); 

Answer 1

バインドフック機能の中に指示コードを書く必要があります。 （Reference）

バインド：

ディレクティブが最初の要素にバインドされたときに、一度だけ呼ばれます。これは、一度のセットアップ作業を実行できる場所です。

だからあなたのコードは次のようになります。https://vuejs.org/v2/guide/components.html#Content-：

Vue.directive('notEmpty', { 
    bind: function (el, binding, vnode) { 
    if (_.isEmpty(binding.value)) { 
     el.style.display = 'none'; 
    } else { 
     el.style.display = 'initial'; 
    } 
    } 
});