Clash Royale CLAN TAG#URR8PPP

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):

thing = text:"some text", href: "https://a.link"

<template>
<div>
<a v-if="thing.href" :href="thing.href">thing.text</a>
<span v-else>thing.text</span>
</div>
</template>


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

thing.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.

href

href

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

<template>
<div>
<div :is="complexThing.href ? 'a' : 'span'" :href="complexThing.href">complexThing.lotsOfStuff</div>
</div>
</template>


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

href

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.

<template>
<div :is="href ? 'a' : or" :href="href">
<!-- href=(unknown) will show in inspector if href is undefined -->
<slot></slot>
</div>
</template>

<script>
export default
name: 'AnchorOr',
props: ['or', 'href']

</script>

<style>

</style>


which can then be used like:

<AnchorOr class="inline-text" :or="span">text</AnchorOr>
<AnchorOr class="linked-module" :or="div">component</AnchorOr>


1 Answer
1

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.

thing.text

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

<component>

<component v-bind="thingProps"> thing.text </component>


computed:
thingProps()
return this.thing.href
? is: 'a', href: this.thing.href
: is: 'span' ;




By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.