vue display and hide object property design

Question

I didn't know how to properly ask this question, so first sorry about the bad title.

Basically, to explain the problem I use the context of a web application that I am building with vueJS.

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.

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.

I did it this way:

<div :style="{'visibility': computedValue}"></div>

This compute value basically is a computed property that returns the 'hidden' or 'show' for the visibility property.

But this brings some issues; on the computed property I am returning data based on the property object, for example:

company.createdAt can be undefined and I still have a error if I use visibility with :style.

I come from an angular environment where v-if and v-show 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.

I just wanted the empty space like it still is there.

Any help or explanations on this?

Answer 1

You can add your own v-visible using a vue directive. Simple add this:

Vue.directive('visible', (el, bind) => {
    el.style.visibility=(!!bind.value) ? 'visible' : 'hidden';});

Then use it like you would v-show