VueJS check if string contains substring in if-statement in v-btn tag

Question

My goal is to check if the link from a json object contains 'http' if yes, give the v-btn a target='_blank' . It can also be for example a #test link.

How I do it now is:

<v-btn
color="primary"
text
:href="x.link"
x.link.includes("http") ? target="_blank" : null
>
    Read more
</v-btn>

That gives this error message with an arrow to the first dubble quote by http error: Parsing error: unexpected-character-in-attribute-name

This is what is in x:

0:Object
created_at:null
header:"Sport"
id:1
image_large:"https://i.picsum.photos/id/389/800/400.jpg"
image_medium:"https://i.picsum.photos/id/389/600/300.jpg"
image_small:"https://i.picsum.photos/id/389/200/200.jpg"
link:"http://example.com"
submenu:null
updated_at:null

Some objs have as link link:"#test"

So the code gives an error on the .includes but I can't really find anything that solves this problem or finds a way around it.

I hope my request is clear. Thanks for the help

How about :target="x.link.includes('http') ? '_blank' : ''" ? It's fine if you leave the attribute empty. — Aurea
– Aurea, Commented Jan 31, 2020 at 13:02
@AurelBílý Thank you that works! If you answer the question I can accept your answer. — SilkeNL
– SilkeNL, Commented Jan 31, 2020 at 13:49

Aurea · Accepted Answer · 2020-01-31 23:04:37Z

1

You're putting JavaScript syntax directly into the "HTML", where it is not interpreted correctly. Not declaring any target and setting target to the empty string is basically equivalent, so instead you can use the normal :attribute syntax to switch between "_blank" and "":

<v-btn
  color="primary"
  (... other things)
  :target="x.link.includes('http') ? '_blank' : ''"
>

(Note the use of single quotes in the actual JS code.)

answered Jan 31, 2020 at 23:04

Aurea

8,0461 gold badge23 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

VueJS check if string contains substring in if-statement in v-btn tag

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