title: vue display and hide object property design
body: <p>I didn't know how to properly ask this question, so first sorry about the bad title.</p>
  
  <p>Basically, to explain the problem I use the context of a web application that I am building with vueJS.</p>
  
  <p>In this application I have a simple table that is rendered with data that comes from the server, basically I get an array of objects, and each object has some properties, the scope of the properties is not important.</p>
  
  <p>Now I want to display some data in a table, and if some of the properties don't come from the server, I want to hide the property on the table, but keep the structure of the table, the missing property should have a empty space on the table.</p>
  
  <p><strong>I did it this way:</strong></p>
  
  <pre><code>&lt;div :style="{'visibility': computedValue}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This compute value basically is a computed property that returns the 'hidden' or 'show' for the visibility property.</p>
  
  <p>But this brings some issues; on the computed property I am returning data based on the property object, for example:</p>
  
  <p><code>company.createdAt</code> can be undefined and I still have a error if I use visibility with <code>:style</code>.</p>
  
  <p>I come from an angular environment where <code>v-if</code> and <code>v-show</code> were a little different,  I know that v-if takes the element out from the DOM and v-show keeps it, but in vue if I do the above example with v-show it still works as v-if in the way that the rendered data works like the data was removed from the DOM.</p>
  
  <p>I just wanted the empty space like it still is there.</p>
  
  <p>Any help or explanations on this?</p>