VueJS 尝试捕获 Enter 在父组件处理 enter 之前按子组件

Question

>我有一个自动完成输入，当我在此输入中按回车键时，它会将其值发送到父组件，然后应该处理父提交操作。但是，父组件似乎首先收到提交表单的 Enter 键，然后子组件最终将发出值，这意味着数据直到需要后才会更新。

我有一个我编造的示例代码笔

代码笔

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

演示