How to concatenate variable and text in Vue.js

In this tutorial, you’ll learn how to concatenate/chain variable and text in Vue.js.

You’ll come across to the situations when you need to, e.g. create an image path by combining a static URL and a string in HTML template, very often.

HTML template

Let’s build this example:

<img :src="staticUrl + 'img/logo.png'">

Note that staticUrl is wrapped in the double quotation marks, whereas the image name is wrapped in both double and single quotation makes.

JavaScript

Now, let’s create a “share this page” variable that will contain a link to the page and some generic text.

this.shareText = 'I’ve found this great article ' + article.permalink

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-concatenate

PS: Make sure you check other Vue.js tutorials, e.g. useful Vue.js filters, how to upload a file in Vue.js and how to dynamically change the path of href in Vue.js.

Incoming search terms: