vuejs return to parent component when @keyup on input-CodePudding

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 >
          <input v-model="userInput" :placeholder="$t('findCenter.placeholder')" type="text">
          <div  @click="getFromAddress()">{{ $t('findCenter.cta') }}</div>
        </div>

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

CodePudding user response：

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 >
          <input v-model="userInput" :placeholder="$t('findCenter.placeholder')" type="text" @keydown.enter.prevent>
          <div  @click="getFromAddress()">{{ $t('findCenter.cta') }}</div>
        </div>