Use keyup enter on custom input field - Vue JS

Question

I have to use keypu.enter in a custom input component on Vue. I want that the component <input /> can execute a function hosted in parent component after a enter key event during typing
This is the component code

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

And there are the main page

<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>

Nikola Pavicevic · Accepted Answer · 2022-01-24 17:07:30Z

1

Try to pass value to your custom event, and in parent component listen to that event :

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>

answered Jan 24, 2022 at 17:07

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use keyup enter on custom input field - Vue JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related