[Vuejs]-Vue v-model changes parent data but doesn't change value prop in custom component

by

0👍

I am guessing that myDataField is not reactive so the problem is in the parent.

0👍

Can you clarify the problem, seems like it is working as it should, ie. the component does not seem to be the problem.

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

new Vue({
  el: '#app',
  components: {
  	zTemp
  },
  data: {
  	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>

0👍

thanks for helping, but I’m using meteor with vue-meteor, the problem was related to vue-meteor.

I changed the project structure to use separated Vue project in a .client folder and the problem gones. It was not a problema with component, but with vue-meteor package. Anyway, thank you guys.

Leave a comment