$ emit выполняется перед вычислением - PullRequest
Новая
       22

$ emit выполняется перед вычислением

0 голосов
/ 08 апреля 2019

Я пытаюсь создать опору, которую я модифицирую. Я могу сделать это напрямую с опорой, и это работает, но я получаю Vue Warn: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

Итак, я попытался поместить реквизит в вычисляемое значение, но команда emit выполняется до выполнения вычисленного значения. 

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

Ответы [ 3 ]

3 голосов
/ 08 апреля 2019

Поскольку Vue не может гарантировать, что v-модель будет выполнена до изменения v-on: change, вы можете использовать наблюдатели для вызова emit только после изменения значения свойства в компоненте, например: 

watch {
  date() {
     this.$emit('myFunc', this.date)
  }
}
0 голосов
/ 08 апреля 2019

Чтобы избежать мутации реквизита, лучше определить локальное свойство данных, которое использует реквизит в качестве исходного значения ( source ): 

props: ['date'],
data () {
  return {
    localDate: this.date
  }
}

Теперь вы можете использовать localDate данные как v-model, и вам не нужны никакие параметры для вашего emitAnswer метода: 

//template
  <input @change="emitAnswer" v-model="localDate">

//script
props: ['date'],
data () {
  return {
    localDate: this.date
  }
},
methods: {
  emitAnswer () {
    this.$emit('myFunc', this.localDate)
  }
}
0 голосов
/ 08 апреля 2019

Во-первых, я считаю, что ваши вычисленные имена неверно названы («dateLocal» должно быть «localDate»), но я думаю, что это не проблема.

Почему вы не проверяете внутри метода прямо перед emit, если установлено значение? 

methods: {
    emitAnswer: function (date) {
        if (date) {
            this.$emit('myFunc', date)
        }
    }
}

Кроме того, для лучшей практики вы должны использовать обработчик set для вычисляемого свойства, которое вы собираетесь изменить: 

 computed: {
     localDate: {
         get () {
             return this.date
         },
         set (date) {
             if (date) {
                 this.$emit('myFunc', date)
             }
         }
     }
 }

Надеюсь, это поможет вам, не стесняйтесь отвечать, если вам нужна дополнительная помощь.

...