title: Vuejs prevent data to be null
body: <p>In my component I've data that is succesptible to be invalid</p>
  
  <pre><code>&lt;template&gt;
    &lt;p&gt; field &lt;/p&gt;
    &lt;p&gt; {{ maybeInvalid }} &lt;/p&gt;
    &lt;p&gt; other field &lt;/p&gt;
  &lt;template&gt;
  
  var component = {
    data: function () {
      return {
        maybeInvalid: xxx
    }
  }
  </code></pre>
  
  <p>I've 3 ideas to fix that :</p>
  
  <p>1 - Use <code>v-if</code> <code>v-else</code> in template</p>
  
  <pre><code>&lt;template&gt;
    &lt;p&gt; field &lt;/p&gt;
    &lt;p v-if="isValid(maybeInvalid)"&gt; {{ maybeInvalid }} &lt;/p&gt;
    &lt;p v-else&gt; invalid &lt;/p&gt;
    &lt;p&gt; other field &lt;/p&gt;
  &lt;template&gt;
  
  ...
  methods: {
    isValid: function (data) {
      return data != null;
    }
  }
  </code></pre>
  
  <p>2 - Make a computed value</p>
  
  <pre><code>&lt;template&gt;
    &lt;p&gt; field &lt;/p&gt;
    &lt;p&gt; {{ computedIsValid }} &lt;/p&gt;
    &lt;p&gt; other field &lt;/p&gt;
  &lt;template&gt;
  
  computed: {
    computedIsValid: function() {
      return isValid(maybeInvalid) ? maybeInvalid : "invalid";
    }
  }
  </code></pre>
  
  <p>3 - build a component</p>
  
  <pre><code>var isValidCompoenent = {
    props: ['maybeInvalid'],
  
    template: `
      &lt;p v-if="isValid(maybeInvalid)"&gt; {{ maybeInvalid }} &lt;/p&gt;
      &lt;p v-else&gt; invalid &lt;/p&gt;`
  
    methods: {
      isValid: function (data) {
        return data != null;
      }
    }
  }
  </code></pre>
  
  <p>and use this component</p>
  
  <pre><code>&lt;template&gt;
    &lt;p&gt; field &lt;/p&gt;
    &lt;is-valid-component :maybeInvalid="maybeInvalid" /&gt; 
    &lt;p&gt; other field &lt;/p&gt;
  &lt;template&gt;
  
  ... 
  components: {
    isValidComponent: isValidComponent
  }
  </code></pre>
  
  <p>I would like to know what's the best (more idiomatic) solution to solve that pattern</p>
  
  <p>Thanks</p>