在自定义输入字段上使用 keyup enter - Vue JS

Question

我必须在 Vue 的自定义输入组件中使用 keypu.enter。我希望组件 <input /> 可以在键入
期间的回车键事件后执行父组件中托管的函数这是组件代码

<input v-on:keyup.enter="$emit('keyup')"/>

还有主页面

<template>
  <se-input @keyup="function()"/>
</template>

<script>
import inputField from '../components/inputfield.vue'

export default {
  name: 'inputField',
  components: {
      'custom-input': inputField
    },
  },
  methods: {
    function () {
      // Function
    }
  }
}
</script>

Answer 1

尝试将值传递给您的自定义事件，并在父组件中监听该事件：

Vue.component('seInput', {
  template: `
    <div class="">
      <input v-on:keyup.enter="$emit('keyup', $event.target.value)"/>
    </div>
  `
})

new Vue({
  el: '#demo',
  data() {
    return {
      inputValue: null
    }
  },
  methods: {
    handleInput(val) {
      this.inputValue = val
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <h3>{{ inputValue }}</h3>
  <se-input @keyup="handleInput"/>
</div>

在自定义输入字段上使用 keyup enter - Vue JS

Use keyup enter on custom input field - Vue JS

javascript

input

onkeyup

vue.js

vuejs2