CODEWITHSUNDEEP
javascriptvue.js
neku894
neku894

Reputation: 396

Vue.js - how to concat one key value to another key's value

I'm learning Vue.js and i have a question: is it possible to put "link" value to "markup" value? Something like this:

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

Upvotes: 0

Views: 243

Answers (3)

Marvin
Marvin

Reputation: 26

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

Upvotes: 1

Adelin
Adelin

Reputation: 8199

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.

Upvotes: 1

Rick Calder
Rick Calder

Reputation: 18685

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>

Upvotes: 2

Related Questions