I’m trying to emit a prop that I modify. I can do that directly with the prop and it works but I get a Vue Warn: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
So I tried to put the prop in a computed, but the emit executes before the computed is executed.
template: <input v-on:keyup="validatedate(localDate)" v-on:change="emitAnswer(localDate)" v-model="localDate"> , computed: { dateLocal: { get: function () { return this.date } } methods: { emitAnswer: function (date) { this.$emit('myFunc', date); } }
Advertisement
Answer
Since Vue can’t guarantee that v-model will be executed before the v-on:change, you can use watchers to only call the emit once the value of the property has been changed in the component, example:
watch { date() { this.$emit('myFunc', this.date) } }