CODEWITHSUNDEEP
javascriptvue.js
Svetoslav Dimitrov
Svetoslav Dimitrov

Reputation: 929

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 to concatenate "/profile/" with user.id that is equal to 2?

Upvotes: 3

Views: 2808

Answers (1)

thanksd
thanksd

Reputation: 55644

You can write javascript inline in Vue templates like this:

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

Alternately, you could bind to a computed property: 

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

Upvotes: 4

Related Questions