[Vuejs]-Vue.js escape double colon

3👍

Vuejs didn’t escape the double colon. what you write inside v-bind:href="..." is not a string, it’s javascript code.

mailto:item.url is not a valid javascript code. so you had to construct a string using the language tools.

Another solution for constructing that string:

  1. Use ES6 Template Literals – cleaner syntax.
  2. You don’t have to explicit declare v-bind:href. You can use the shorthand :href. this is more standard and more readable.

see the code:

<a :href="`mailto:${item.url}`">

Edit 1

You put your entire template already inside template string. It is possible to nest template literal inside another template literal expression.

weather your think using template literal will contribute to the readability of your code, it’s up to personal taste.

Maybe the case is more debatable when you are using the simple form of template.
When using the webpack boilerplate, which has vue-loader configured , it is much more readable.

👤LiranC

2👍

Just found out by myself that the following code works:

v-bind:href="'mailto:' + item.mail"

Leave a comment