Conditionally setting a href attribute with vueJS

Question

 <tr v-for="(i, index) in streams">
                            <td class="text-center">{{index + 1}}</td>
                            <td class="text-center">{{i.title}}</td>
                            <td class="text-center"><label class="label" v-bind:class="{ 'label-danger' : i.stateIndex === 0, 'label-warning' : i.stateIndex === 1, 'label-success' : i.stateIndex === 2 }">{{i.state}}</label></td>
                            <td class="text-center link"><a v-bind:href="i.link" target="_blank"><i v-bind:class="i.streamingPlatformClass"></i></a></td>
                            <td class="text-center">{{i.userId}}</td>
                            <td class="text-center">{{i.streamingPlatformID}}</td>
                            <td class="text-center"><button v-on:click="removeStream(i.id)" class="btn btn-primary manageStreamButton">Remove</button><button v-on:click="stopStream(i.id)" v-if="i.stateIndex != 2" class="btn btn-primary manageStreamButton">Stop</button></td>
                        </tr>

In the TD with class "link", I'm trying to conditionally set a href attribute. The "link" property in streams is either a youtube link or an tag with a FB video source. The idea is to make it a clickable link when the link property has a youtube link AND to disable the href attribute when the link property has an tag so it's not clickable. So far I've managed to conditionally alter the href attribute but it still remains clickable and with a link. I know it can be done with onclick return false, but I'm looking for another way. Or if it's possible to remove the tag conditionally, that would be a great solution aswell.

jakhicks · Accepted Answer · 2018-10-04 07:43:35Z

1

You could remove the tag conditionally with a v-if. It does mean duplicating your icon code;

<td class="text-center link">
    <a v-if="showLink" v-bind:href="i.link" target="_blank"><i v-bind:class="i.streamingPlatformClass"></i></a>
    <i v-if="!showLink"  v-bind:class="i.streamingPlatformClass"></i>
</td>

answered Oct 4, 2018 at 7:43

jakhicks

6041 gold badge6 silver badges8 bronze badges

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

1 Comment

duck head Over a year ago

Thank you, I did exactly this a moment before you posted it :) I'm glad somebody else thinks that's a decent solution, because I mostly come up with unnecessarily comples ones :) Cheers!

Reynicke · Accepted Answer · 2018-10-04 07:51:31Z

1

There are several options to do this. I think the best one is to switch between an <a> and another tag, for example <span>.

<a v-if="shouldLink" v-bind:href="i.link">Link</a>
<span v-else>Link</span>

Other ways could include setting the href to something like javascript:void() to disable the linking or adding a CSS class with pointer-events: none to prevent clicking on the link.

answered Oct 4, 2018 at 7:51

Reynicke

1,5882 gold badges14 silver badges24 bronze badges

Collectives™ on Stack Overflow

Conditionally setting a href attribute with vueJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related