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