CODEWITHSUNDEEP
vue.js
dwonisch
dwonisch

Reputation: 5795

Data passed through props is not rendered when used as attribute value

I have a component looking like this, defining 'name' and 'placeholder' properties:

Vue.component("text-control", {
    props: {
        name: String,
        placeholder: {type: String, default: ""},
    },
    template: '<div class="form-group"><label>{{name}}</label> <input class="form-control" type="text" placeholder="{{placeholder}}"></div>'
});

Called like that on my page:

<text-control name="Name" placeholder="Enter Name here"></text-control>

Name property is parsed correctly. But I couldn't get the placeholder attribute value working. It is showing me {{placeholder}} instead of Enter Name here. How can I bind a property to an attribute's value inside my template?

Upvotes: 2

Views: 44

Answers (1)

Linus Borg
Linus Borg

Reputation: 23988

In Vue 2.0, you can't use {{}} in attribute etc. You should use v-bind:

<input class="form-control" type="text" v-bind:placeholder="placeholder">

Upvotes: 2

Related Questions