My goal is to utilize VueJS 2 to render an inline condition while simultaneously adding a value to a DOM element. I am aware that I can use v-if to control the visibility of elements based on conditions, but how can I achieve an inline condition?
For example, the HTML below illustrates my concept even though it may generate an error. Both <span> elements are conditionally displayed, which works as expected.
Now, I want to dynamically bind a value to the href attribute based on a condition (as shown in the parentheses in the 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>
After VueJS renders the content, the <a> tag should look like this:
<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 see my issue and is there a way to achieve this functionality?
Thank you in advance
Allan