Truncate and interpolate variable in Vue JS

Question

I'm new to Vue and utilising a World Cup API to build a simple Laravel app. I have the following code:

<img src="http://www.countryflags.io/@{{ match.home_team.code | truncate(2) }}/flat/64.png">

Which should ideally output the following:

<img src="http://www.countryflags.io/FR/flat/64.png">

But instead I get an error because it's not parsing the @{{ }} block properly inside Laravel/Vue.

This is the truncate filter I'm trying to use incase that's important - https://www.npmjs.com/package/vue-truncate-filter

match.home_team.code should return FRA for France for example, but I only need FR

What is the best way for me to achieve what I'm after?

DevK · Accepted Answer · 2018-06-16 23:15:09Z

1

You could use template literals and do this:

<img :src="`http://www.countryflags.io/${match.home_team.code.substring(0, 2)}/flat/64.png`">

Might also work with a filter, but I'm not sure about that.

answered Jun 16, 2018 at 23:15

DevK

10k2 gold badges33 silver badges51 bronze badges

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

3 Comments

Andy Holmes Over a year ago

Kinda works, but still get a bit of an error with the attempted output. http://www.countryflags.io/$%7Bmatch.home_team.code.substring(0,2)%7D/flat/64.png 404 (Not Found)

DevK Over a year ago

Did you add : to the :src?

Andy Holmes Over a year ago

YEah copied it exactly as above

Collectives™ on Stack Overflow

Truncate and interpolate variable in Vue JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related