VueJS composante de synchronisation d'entrée

Question

Je veux créer des composants qui ont entrée qui se lient à deux voies à la portée locale du composant.

Sans un composant, je voudrais créer une nouvelle instance Vue puis mettre mon data à ce que je dois. Ensuite, en utilisant v-model, lier une entrée à ces données et il peut être manipulé à partir de l'entrée.

Cependant, en convertissant le même code en un composant, je ne peux pas pour la vie de moi obtenir une entrée dans un composant à lier à ses données. J'ai essayé des accessoires, :data.sync, data attributs, mais peu importe ce que je l'ai essayé, l'entrée dans un composant ne fait rien.

J'ai créé un jsFiddle pour illustrer ceci:

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

Ce que je voudrais arriver est l'entrée dans le composant à deux se lient ainsi à la variable err, tout comme la version non composant se trouvant sous .

Comment est-ce que j'accomplirais ceci? Je veux fondamentalement créer des composants que je peux instansiate avec des données d'ajax et peupler alors les entrées. Les entrées pourraient alors mettre à jour les données et je peux utiliser une méthode de sauvegarde pour envoyer les données au serveur. Est-ce que cela peut même être fait en utilisant des composants?

Answer 1

Donc, il y a deux ou trois choses:

• La ressource externe que vous utilisiez était en quelque sorte défectueux. Je l'ai utilisé jsfiddle par défaut Vue instance et il fonctionne très bien.
• Lorsque vous déclarez un composant, vous ne devez pas définir les données comme un objet, mais en fonction renvoyant un objet. Lisez ici: https://vuejs.org/guide/components.html#Component-Option-Caveats

Un exemple de réalisation ici: https://fiddle.jshell.net/by4csn1b/1/

Answer 2

Oui, avec des composants, la réactivité peut être accompli tout comme avec une instance.

Une capture avec des composants, est que data doit être une fonction qui retourne un objet.

De même, pour conserver la liaison bidirectionnelle, utilisez v-model dans votre saisie.

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/