title: Custom vue directive to render only if present
body: <p>Frequently, I want to render a div (or other element) only if it has content. This means repeating the reference to the content in the tag, and in v-if, like this...</p>
  
  <pre><code>&lt;div v-if="store.sometimesIWillBeEmpty"&gt;{{store.sometimesIWillBeEmpty}}&lt;/div&gt;
  </code></pre>
  
  <p>With custom directives, I want to create a directive, v-fill, that behaves just like the code above, but with simplified syntax...</p>
  
  <pre><code>&lt;div v-fill="store.sometimesIWillBeEmpty"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>updated</strong> The following works when message is not empty. What do I set or clear to render nothing when message is empty?</p>
  
  <pre><code>var store = {message: "hello cobber"}
  Vue.directive('fill', 
    function (el, binding, vnode) {
      if(binding.value)
        el.innerHTML = binding.value
      else
        el = null
    }
  );
  
  new Vue({
    el: '#fill-example',
    data: {
      store: store
    }
  })
  </code></pre>
  
  <p>I'm one line away. <a href="https://jsfiddle.net/t0b4140t/1/" rel="nofollow noreferrer">Here's my fiddle.</a> Anyone have any ideas?</p>