CODEWITHSUNDEEP
javascriptstringvue.jsvuetify.js
SilkeNL
SilkeNL

Reputation: 540

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

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

Upvotes: 0

Views: 21943

Answers (1)

Aurel B&#237;l&#253;
Aurel B&#237;l&#253;

Reputation: 7963

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

Upvotes: 1

Related Questions