javascript - Vue.js template concatenate props -

js:

vue.component('profile', {     template: `<a v-bind:href="id"></a>`,      props: ['id'] });  var app = new vue({     el: '.app',     data: {         user: userobject     } }); 

html:

<profile :id="user.id"></profile> 

expected result:

<a href="/profile/2"> 

question: how concatenate "/profile/" user.id equal 2?

you can write javascript inline in vue templates this:

template: `<a v-bind:href="'/profile/' + id"></a>`, 

---

alternately, bind computed property:

vue.component('profile', {   template: `<a v-bind:href="url"></a>`,   props: ['id'],   computed: {     url() {       return '/profile/' + this.id;     }   } }); 

wiki