VueJS 2 conditional rendering in value binding

Question

I simply try to let VueJS 2 render a inline condition while I add a value to an dom element. I know, that it is possible to use v-if to let elements appear or disappear based on conditions, but how can I use a inline-condition?

I will give an example. The following html describe my idea and I know that this lines generates an error. Both <span> elements are controlled by conditions which lets them appear or not and this works fine.

Now, I try to bind a value to the href attribute depending on a condition (which are in the parentheses for example).

<div id="vuemain">
<span v-if="diced < 6">Looser</span>
<span v-if="diced == 6">Winner</span>
<a :href="'https://link-to-whatever.com/'+{diced==6 : 'winner', diced<6 : 'looser'} ">LINK</a>
</div>

So after rendering by VueJS the <a> tag should be like:

<a href="https://link-to-whatever.com/winner"> <!-- If diced == 6 -->

OR

<a href="https://link-to-whatever.com/looser"> <!-- If diced < 6 -->

Do you understand what my problem is and is that somehow possible?

Many thanks in advance

Allan

Allan Karlson · Accepted Answer · 2017-08-30 20:40:42Z

3

This should work.

<a :href="'https://link-to-whatever.com/'+ (diced==6 ? 'winner' : 'looser')">LINK</a>

It looks like you were trying to use the object syntax, which won't really work in this case. Instead, just use the ternary above.

edited Aug 30, 2017 at 20:40

Allan Karlson

49711 silver badges24 bronze badges

answered Aug 30, 2017 at 20:22

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS 2 conditional rendering in value binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related