VueJS Попытка перехватить нажатие ввода на дочернем компоненте до того, как родительский компонент обработает ввод

Question

У меня есть автозаполнение ввода, которое, когда я нажимаю ввод в этом вводе, должно передать его значение родительскому компоненту, а затем должно быть обработано родительское действие отправки.Однако, похоже, что родитель сначала получает ключ ввода, отправляющий форму, а затем дочерний компонент, наконец, выдаст значение, означающее, что данные не обновляются до тех пор, пока они не потребуются.

У меня есть пример кода, пера Iсоставлен

codepen

Vue.component('child', { 
  data () {
    return {
      someData: ""
    }
  },
  template: `
    <div>
      <input @keyup.enter.capture="enterPressed" v-model="someData" />
    </div>
  `,
  methods: {
    enterPressed(){
      this.$emit('updateData',this.someData)
      console.log('CHILD: enter pressed')
    }
  }
});

Vue.component('parent', { 
  data () {
    return {
      lastGo: null,
      parentData: "init"
    }
  },
  template: `
    <form v-on:submit.prevent="go">
    <child @updateData="updateData"></child>
    <button @click="go">Go</button>
    <p>Parent data: <b>{{parentData}}</b></p>
    <p>Last go: <b>{{lastGo}}</b></p>
    </form>
  `,
  methods: {
    updateData(data){
      this.parentData = data;
    },
   go(){
     this.lastGo = this.parentData;
     console.log("go: "+this.parentData)
   }
  }
});

new Vue({
  el: '#app'
});

Я не уверен, как решить эту проблему, я чувствую, может быть, что мой шаблон просто не будет работать, естьлучший способ?

Answer 1

Существует способ обойти использование @input события в дочернем компоненте

Vue.component('child', { 
  data () {
    return {
      someData: ""
    }
  },
  template: `
    <div>
      <input @input="onInput" v-model="someData" />
    </div>
  `,
  methods: {
    onInput(){
      console.log('CHILD: enter pressed')
      this.$emit('updateData',this.someData)
    }
  }
});

Демо