Vue v-modelは親データを変更しますが、カスタムコンポーネントの値propを変更しません

Question

誰かがこの奇妙な問題を手伝ってくれますか？

私は、次のVUEのコンポーネントを持っている：私はChangeボタンでクリックしたときに成功とmyDataField変更、私はv-modelを使用したいが、私は<z-temp v-model="myDataField">を使用する場合

<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> 

が、私は逆を作るときとmyDataFieldに値を入力します。myDataField: "foo"のように、fooとしてthis.valueをundefinedとします。

誰でも教えてください。

Answer 1

私は、myDataFieldが反応しないので、問題は親にあると推測しています。

Answer 2

問題を明確にすることができますか、それはすべきである、すなわち動作しているようです。コンポーネントは問題ではないようです。

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

支援するためのおかげで、私はvue-meteorでmeteorを使用していますが、問題はvue-meteorに関連していました。

.clientフォルダ内の別のVueプロジェクトを使用するようにプロジェクト構造を変更し、問題が解消しました。それはコンポーネントの問題ではなく、vue-meteorパッケージであった。とにかく、ありがとう。