CODEWITHSUNDEEP
javascriptvue.js
EleXorZ
EleXorZ

Reputation: 47

vuejs return to parent component when @keyup on input

I have a component with an input, when I press enter I get redirected to my parent component. Even when I put a @keyup I have exactly the same problem.

Is this because I'm in a child component? How to disable the action of the enter key?

        <div class="form-field">
          <input v-model="userInput" :placeholder="$t('findCenter.placeholder')" type="text">
          <div class="btn primary" @click="getFromAddress()">{{ $t('findCenter.cta') }}</div>
        </div>

        <div class="form-field">
          <input @keyup.enter="getFromAddress()" v-model="userInput" :placeholder="$t('findCenter.placeholder')" type="text">
          <div class="btn primary" @click="getFromAddress()">{{ $t('findCenter.cta') }}</div>
        </div>

Upvotes: 0

Views: 49

Answers (1)

yoduh
yoduh

Reputation: 14729

If you have some default behavior of an input or form submit you want to prevent you can use the .stop and/or .prevent event modifiers on the event so that it's default action should not be taken. It can be done on the form itself, <form @submit.prevent> or on an input if a specific input is causing you trouble

Preventing default enter keydown behavior for your input:

<div class="form-field">
          <input v-model="userInput" :placeholder="$t('findCenter.placeholder')" type="text" @keydown.enter.prevent>
          <div class="btn primary" @click="getFromAddress()">{{ $t('findCenter.cta') }}</div>
        </div>

Upvotes: 1

Related Questions