Question

我有一个自动完成输入，当我在此输入中按Enter键时，它将把其值发送给父组件，然后应处理父提交动作。但是，似乎父级首先接收提交表单的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)
    }
  }
});

Demo

VueJS尝试在父组件句柄进入之前捕获子组件上的Enter键

1 个答案: