title: Vue2: Custom Directive Like v-if
body: <p>I'm trying to create a custom directive like v-if so it will only render if the data being passed into the element isn't empty. For example:</p>
  
  <pre><code>&lt;div v-if="!_.isEmpty(data.employer)"&gt;{{ data.employer.name }}&lt;/div&gt;
  </code></pre>
  
  <p>This will render only if data.employer isn't empty so it won't throw a reference error. I'm trying to create a directive that will simplify this to just <code>v-notEmpty="data.employer"</code> and run the logic inside the directive but the issue is that it's doing the hook on the custom directive after the element is being rendered so it throws the reference error that employer is undefined. </p>
  
  <p>Is there any way to get a custom directive to work exactly like the v-if which runs the logic before the element is actually created. This is what I had so far:</p>
  
  <pre><code>    Vue.directive('notEmpty', (el, binding) =&gt; {
    if (_.isEmpty(binding.value)) {
      el.style.display =  'none';
    } else {
      el.style.display =  'initial';
    }
  });
  </code></pre>