[Vuejs]-Vue.js – how to concat one key value to another key's value

by

1👍

✅

We can make it like this

new Vue({
 el: '#vue-app',
 data: {
   name: 'Shaun',
   link: 'https://stackoverflow.com'
 }
});

<template>
  <a :href="link">This is a link</a>
</template>

PLS note that should be :href=”link”,not href=”{{ link }}”,here is different from @Rick Calder ‘s answer, that is not available in Vue 2.0

👤Marvin

2👍

Don’t build your markup in the data like that, this is what the template is for 

new Vue({
 el: '#vue-app',
 data: {
   name: 'Shaun',
   link: 'https://stackoverflow.com'
 }
});

<template>
  <a href="{{ link }}">This is a link</a>
</template>
👤Rick Calder

1👍

Yes but not quite like that.

this right there can be so many things.. it’s not clear what it is from the very context you provided. Can be a global object, can be a function, etc. but it is definitely not the link you expect.

You could declare it somewhere above, and use it in both the link property and in the markup property:

var link = 'https://stackoverflow.com';
new Vue({
 el: '#vue-app',
 data: {
   name: 'Shaun',
   link: link ,
   markup: '<a href="' + link + '">This is a link</a>'
 }
});

However, I don’t recommend doing this. Use @RickCalder solution instead for this specific use case. I’m just addressing a solution that you could use in other, more appropriate cases.

👤Adelin

Leave a comment