Skip to content
Advertisement

$emit executes before computed

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)
  }
}
User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement