When an input in Vue.js registers a @keyup event, it will return to the parent

I am encountering an issue with my input component where pressing enter redirects me to the parent component. Even adding a @keyup event does not solve the problem.

Could this be happening because I am in a child component? How can I prevent the enter key action?

        <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>
javascriptvue.js

Answer №1

To prevent the default behavior of an input or form submit, you can utilize the event modifiers such as .stop and/or .prevent. By adding these event modifiers to the event, you can ensure that the default action is not taken. This can be applied directly on the form itself using <form @submit.prevent> or on a specific troublesome input.

If you want to prevent the default behavior of the enter keydown for your input field, you can do so with the following code:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging Javascript to retrieve input values

Here is my HTML code snippet: <li id='category-10'> <label class="selectit"> <input value="10" type="checkbox" name="post_category[]" id="in-category-10" /> Developmental </label> </li> Below is my JavaScript funct ...

javascriptjqueryinput

MongoDB date query with $gte and $le operators mm/dd/yy

Apologies in advance for any language errors. The problem I am dealing with involves a column in the database called "Date" inside the "startOn" Object. This setup creates a structure like "startOn.Date" with data format as yyyy/dd/mm. For example, if we ...

javascriptnode.jsmongodbmongoose

Tips for deleting multiple uploaded images from an array using Vue.Js and updating the UI accordingly

I am currently utilizing VueJs to upload multiple images. I am saving their respective base64 values in an Array to store them in the database. I have also added a remove feature, so when the user clicks on the remove button, it finds the index of that ele ...

javascriptvue.jsvuejs2

When utilizing Javascript's Array.push method, a nested array is generated that is inaccessible using the index

I have reviewed several articles discussing the issue of asynchronous calls returning undefined. Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference Get data from fs.readFile However, none of these articles ...

javascriptarraysreactjsmernarray-push

Creating a customized component using unique styles in Material UI version 1

Currently, I am facing a challenge in styling my Card component with a width of 75 pixels while using Redux and Material UI V1. Despite following the example provided by Material UI on custom styling through withStyles and connect, I have not been able to ...

javascriptreactjsreduxreact-reduxmaterial-ui

Oops! Property 'month' cannot be set on undefined value due to a TypeError

Despite not receiving any errors from Visual Studio Code, I’m encountering an error in Chrome's console. Below is the code snippet from my interfaces.ts file: export interface Data1{ month: string; employeeName: string; date: string; employmentSta ...

javascriptangulartypescript

What is the reason for the addEventListener function not being able to access global variables?

I have set up an event listener function to utilize popcorn.js for displaying subtitles. Additionally, I have created functions that are unrelated to popcorn.js outside of the event listener and declared a global variable array. However, when attempting ...

javascriptxmlhtmlpopcornjs

Is it possible to utilize the identical variable in both SCSS and Vue?

Is it possible to utilize the same variable in both SCSS and Vue components? In my project, there is a requirement to derive a number from the data that should be consistent across both technologies. How can I access and manipulate this shared variable be ...

vue.jssass

In Google Chrome, the edges of hexagons appear jagged and not smooth

I have encountered an issue in Chrome where I created a hexagon group using HTML and CSS. While it displays fine in Firefox, the edges of the hexagons appear distorted in Chrome. Here are my code snippets: HTML <div class="col-sm-12 margin-left-100" i ...

javascriptjqueryhtmlcssgoogle-chrome

Angular JS: How to dynamically add and remove checkboxes in ng-repeat?

Currently, I have successfully implemented a Miller column using Angular and Bootstrap. To view the functionality in action, you can check out the code snippet at this link. In the second column of my setup, clicking on a word opens up the third column. ...

javascriptangularjscheckboxangularjs-ng-repeat

implementing a webpage enhancement that enables loading content asynchronously

I find myself puzzled. Lately, I've delved into learning Spring MVC through the development of a web application designed to display live sports scores in real-time. The core functionalities are already in place, but I'm unsure about how to creat ...

javascriptangularjsajaxspring-mvcasynchronous

Deleting an element from an array in JavaScript

I am working with a JavaScript array that I need to store in local storage. var myArray; myArray = [1,2,3,4,5]; localStorage.setItem('myArray', JSON.stringify(myArray)); The above code snippet sets the values of the 'myArray' ...

javascriptjqueryarrays

What's the best way to show floating point numbers in a concise format while also maintaining the ability to perform calculations within this Vue app?

I'm currently developing a compact calculator application using Vue 3 and implementing some custom CSS. For the most part, everything seems to be functioning correctly, except for when the results are long numbers that extend beyond the display limit ...

javascriptcssvue.jscalculatorvuejs3

Transform jQuery code to its equivalent in vanilla JavaScript

While I am proficient in using jQuery, my knowledge of pure JavaScript is somewhat limited. Below is the jQuery code that I have been working with: $(document).ready(function() { $.get('http://jsonip.com/', function(r){ var ip_addre ...

javascriptjqueryajax

The steps to display a partial view within another view in React Native

Attempting to show the View after calling alert("Hi") in the renderMoreView function has been challenging for me. The alert works fine, but displaying the View is where I am encountering issues. class Main extends Component { state = { moreButton: f ...

javascriptreactjsreact-nativeexpo

Variations in output observed from angular function across various sections within DOM

After fetching a list of permissions in the background, my goal is to display a page or an error message based on whether the user has the required permissions. I encountered an unusual issue where both sections of the page are being displayed despite hav ...

javascriptangularjsweb

Having Difficulty Converting JavaScript Objects/JSON into PHP Arrays

This particular inquiry has no relation to the previously mentioned identical answer/question... In JavaScript, I am dealing with a substantial list of over 1,000 items displayed in this format... var plugins = [ { name: "Roundabout - Interac ...

javascriptphpjson

Unknown error occurred in Eventstore: Unable to identify the BadRequest issue

I'm encountering an error while using Eventstore, specifically: Could not recognize BadRequest; The error message is originating from: game process tick failed UnknownError: Could not recognize BadRequest at unpackToCommandError (\node_modul ...

javascripttypescripteventsevent-handling

Formik Fields with unique key properties

When mapping text fields, I follow this structure: { AddVehicleFields.map(({formikRef, ...input}) => ( <> <TextField key={formikRef} helperText={ getIn(formik.touched, formikRef) ? getIn(formik. ...

javascriptreactjstypescriptformik

What is the best way to show the current date and time?

To filter out and display only the date from the array that is the largest compared to the current date, all dates are displayed. const states = States.select().exec() var curr = new Date(); for (var i = 0; i < states.length; i++) { var maxDate = ...

javascriptnode.js