CODEWITHSUNDEEP
laravellaravel-5vue.jslaravel-5.6
Andy Holmes
Andy Holmes

Reputation: 8077

Truncate and interpolate variable in Vue JS

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?

Upvotes: 0

Views: 146

Answers (1)

DevK
DevK

Reputation: 9952

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.

Upvotes: 1

Related Questions