VueJS Component Input Sync

Question

Я хочу создать компоненты, у которых есть вход, двусторонняя привязка к локальной области компонента.

Без компонента я бы создал новый экземпляр Vue, а затем установил мой data в то, что мне нужно. Затем, используя v-model, привяжите вход к этим данным и его можно манипулировать с входа.

Однако, преобразование одного и того же кода в компонент, я не могу на всю жизнь получить какие-либо данные в компоненте для привязки к его данным. Я пробовал реквизиты, :data.sync, data атрибутов, но независимо от того, что я пробовал, вход внутри компонента ничего не делает.

Я создал JSFiddle для иллюстрации этого:

https://fiddle.jshell.net/f0pdmLhy/2/

То, что я хотел бы случиться вход в компоненте два путей связываются с переменной ERR, так же, как несвязная версия компоненты под ,

Как бы это осуществить?

Я в основном хочу создать компоненты, которые я могу установить с помощью данных ajax, а затем заполнить входы. Входы могут затем обновить данные, и я могу использовать метод сохранения для отправки данных на сервер. Можно ли это сделать даже с помощью компонентов?

Answer 1

Итак, есть несколько вещей:

• внешний ресурс, который вы использовали как-то неисправно. Я использовал jsfiddle по умолчанию Vue экземпляр, и он отлично работает.
• Когда вы объявляете компонент, вы не должны определять данные как объект, а как функцию, возвращающую объект. Читайте здесь: https://vuejs.org/guide/components.html#Component-Option-Caveats

рабочий пример здесь: https://fiddle.jshell.net/by4csn1b/1/

Answer 2

Да, с компонентами, реакционная способность может быть выполнена так же, как с экземпляром.

Один улов с компонентами состоит в том, что data должен быть функцией, которая возвращает объект.

Кроме того, чтобы поддерживать двустороннюю привязку, используйте v-model на вашем входе.

Vue.component('ii', { 
    template: '<span>{{err}}</span><input type="text" v-model="err"><hr>', 
    data: function() { 
    return { 
     err: 123 
    } 
    } 
}) 

Fiddle: https://fiddle.jshell.net/f0pdmLhy/25/