CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Sergio
Sergio

Reputation: 28845

Vue binding overrides element attribute

I have a component that renders a HTML input:

<input
    :placeholder="placeholder"
    v-model="value"
    type="text"
    :disabled="disabled"
    :readOnly="readOnly"
    @focus="onFocus"
/>

Note that the type is not binded/reactive.

When I put this component inside another, and bind a object to it, the type gets overrided.

 <my-input v-bind="{type: 'foobar'}"></my-input>

Is this a by design or a bug?

Example (check the input[type] in the HTML):

const Input = {
    template: '<input type="text"/>'
    //                      ^^^^ "text" gets overriden to "foobar"
}
new Vue({
    el: '#demo',
    components: {
        'my-input': Input
    }
});
<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
    <my-input v-bind="{type: 'foobar'}"></my-input>
</div>

Upvotes: 1

Views: 2599

Answers (2)

Posva
Posva

Reputation: 1112

I answered this in an issue, this is expected

https://github.com/vuejs/vue/issues/5846#issuecomment-307098682

You can, however, disregard attrs by adding them as props and ignore them

const Input = {
    props: ['type'],
    template: '<input type="text"/>'
    //                      ^^^^ "text" won't get overriden
}
new Vue({
    el: '#demo',
    components: {
        'my-input': Input
    }
});

Other attributes like class get merged but type can only be overriden

Upvotes: 4

Lucas Katayama
Lucas Katayama

Reputation: 4580

VueJS adds the component attributes to the first child node of the component template.

Look this fiddle

http://jsfiddle.net/8hzhvrng/

The my-input has a inputroot child and then it gets the type="password"

The my-input2 has a div root child which gets the type="number"

Upvotes: 0

Related Questions