Skip to content
Advertisement

Vue: convention for conditional props in dynamic components?

I am fairly new to Vue, so if what I am doing is absurd, please let me know.

A common convention in many of my components is something like this (only showing relevant parts of code):

JavaScript

I dislike this as thing.text may in actuality be a lot of stuff (not just text).

Further, I dislike the redundancy for rendering the anchor tag i.e. if there is an href be an anchor tag with an href.

Thus I would like to shorten and clean this up like so:

JavaScript

Which is nice, we are down to one line, but at the cost of href being bound to nothing when it doesn’t exist…

So is there a way to conditionally bind a prop?

Of course I could wrap this convention into a component of its own. However, I find that what it is, is very dependent on the component I am using it in. I do not like having to copy and paste a chunk of identical code between an if-else statement just to get an href.

Thoughts? Ideas?

e.g.

JavaScript

which can then be used like:

JavaScript

Advertisement

Answer

In your small example, I would leave it as-is; however if {{ thing.text }} were instead a larger template partial then duplicating it is a no-no.

You would normally use <component> for situations like this:

JavaScript
JavaScript
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement