Привязка Vue переопределяет атрибут элемента

Question

Привязка Vue переопределяет атрибут элемента

1

У меня есть компонент, который отображает ввод HTML:

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

Обратите внимание, что type не привязан/реактивен.

Когда я помещаю этот компонент в другой и привязываю к нему объект, type становится переопределенным.

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

Это by design или bug?

Пример (проверьте input[type] в 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>

Sergio 08 июнь 2017, в 11:49

Источник

Теги:

javascript

vue.js

vuejs2

vue-component

2 ответа

Ещё вопросы

Posva · Answer 1 · 2017-06-08T11-32-00.000Z

Я ответил на это в вопросе, это ожидается

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

Вы можете, однако, игнорировать attrs, добавляя их в качестве реквизита и игнорируя их

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

Другие атрибуты, такие как class объединяются, но type может быть переопределен

Я думаю, что вы хотели избавиться от комментария? «текст» не перезаписывается
Да, я забыл, чтобы отредактировать комментарий. Сейчас исправлено :) спасибо

Lucas Katayama · Answer 2 · 2017-06-08T09-25-00.000Z

VueJS добавляет атрибуты компонента к первому дочернему узлу шаблона компонента.

Посмотрите эту скрипку

http://jsfiddle.net/8hzhvrng/

У my-input есть input корневой дочерний элемент, а затем он получает type="password"

В my-input2 есть дочерний корень div который получает type="number"