Vue v-model modifie les données parent mais ne change pas la valeur prop dans le composant personnalisé

Question

quelqu'un pour m'aider avec ce problème étrange?

Je la composante vue suivante:

<template lang="pug"> 
div 
    p.alert.alert-info {{value}} 
    button(@click="onChange") Change 
</template> 

<script> 
    import Vue from 'vue'; 
    export default { 
    name: 'z-temp', 
    props: { 
     value: { 
     required: true 
     } 
    }, 
    watch: { 
     value(val) { 
     console.log(val); 
     } 
    }, 
    methods: { 
     onChange() { 
     this.$emit('input', Random.id()); 
     } 
    } 
    }; 
</script> 

Je veux utiliser v-model, mais quand je l'utilise <z-temp v-model="myDataField">, les myDataField changements avec succès lorsque je clique sur le bouton Change, mais quand je fais l'inverse et mettre une valeur dans myDataField, comme myDataField: "foo" le composant personnalisé obtient this.value comme undefined à la place comme foo.

Quelqu'un peut-il m'aider s'il vous plaît?

Answer 1

Je devine que myDataField n'est pas réactif donc le problème est dans le parent.

Answer 2

Pouvez-vous clarifier le problème, semble qu'il fonctionne comme il se doit, à savoir. le composant ne semble pas être le problème.

zTemp = Vue.component('ztemp', { 
 
\t template: '#ztemp', 
 
    props: { 
 
    value: { 
 
     required: true 
 
    } 
 
    }, 
 
    watch: { 
 
    value(val) { 
 
     console.log(val); 
 
    } 
 
    }, 
 
    methods: { 
 
    onChange() { 
 
     this.$emit('input', Math.random()); 
 
    } 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    \t zTemp 
 
    }, 
 
    data: { 
 
    \t myinput: '0.2' 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
 

 
<div id="app"> 
 
    {{myinput}}<br/> 
 
    <input v-model="myinput"/><br/> 
 
    <ztemp v-model="myinput"/><br/> 
 
</div> 
 

 
<script type="text/x-template" id="ztemp"> 
 
    <div> 
 
    <p>{{value}}</p> 
 
    <button @click="onChange">Change</button> 
 
    </div> 
 
</script>

Answer 3

merci pour aider, mais j'utilise meteor avec vue-meteor, le problème était lié à vue-meteor.

J'ai modifié la structure du projet pour utiliser un projet Vue séparé dans un dossier .client et le problème gones. Ce n'était pas un problème avec le composant, mais avec le paquet vue-météore. Quoi qu'il en soit, merci les gars.