vue display and hide object property design

4
votes

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?

2
javascriptvue.js
Why not conditionally render a css class on the element that goes like .hidden { visibility: hidden; }? – connexo
that is not the problem, i can do it of course but the element is still there, if the element doesn't show up it will stil be on the html and if object.property is undefinedi i still get the error – af costa
I don't understand your problem. – connexo
v-show will toggle display:none to the element, display:none will both hide and remove an element from the document layout. for above your use case, probably this way meet your requirements: <div :style="{'visibility': company && company.createdAt ? 'visible' : 'hidden'}"></div> – Sphinx
Your question is indeed confusing. In fact, I don't even know what the question is. What exactly are you asking? – Narm

2 Answers

6
votes

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

1
votes

You're trying to hide the element but preserve the space, right? vue-visible is a simple npm package that I used recently to do that; the benefit is when you include it, you can very easily and semantically use it like this: v-visible="value", just like v-show or v-if, with value being true/false.