When using VueJs, the input value may not clear upon pressing the ESC key for the first time

When I press the ESC key, my input should clear. However, I am experiencing a bug where the input is not cleared after the first press of the ESC key; it only clears after the second press.

Even though the console displays an empty value for the input after the first press, it remains unchanged in the UI.

Below is a snippet of code that handles the ESC key:

HTML :

<input
      type="text"
      :name="context.name"
      :id="context.id"
      v-model="context.model"
      @blur="context.blurHandler"
      @keyup="getSuggestions"
      autocomplete="no"
      class="mc-text-input"
      ref="autocompleteInput"
    />

And the ESC event:

case 27: {
          console.log('Before : ' + this.$refs.autocompleteInput.value)
          this.$refs.autocompleteInput.value = ''
          console.log('After : ' + this.$refs.autocompleteInput.value)
          this.resetAutocompleteElt() // hide the autocomplete list
          break
}

I am looking for a way to ensure that the input is cleared on the first press of the ESC key.

Answer â„–1

v-model facilitates two-way binding, so it is recommended to update context.model instead of directly modifying the element value, which could be causing the issue at hand.

For example, assuming that you have access to context.model in the function handling the event.

Exchange:

this.$refs.autocompleteInput.value = ''

with:

this.context.model = '';

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

Filtering an array of JSONs in Vue.js using a separate array of JSONs

In my code, there are two arrays of JSONs: one named products and another called deletedProducts. The task is to filter out the products that are not present in the deletedProducts array. For instance: products = [ { id: 1, name: 'Box&apos ...

What is the best way to integrate ES6 ReactJS code into an Express application?

I am trying to initially render my ReactJS application on the server using ExpressJS. Although I have been able to import ES6 modules using require(), the module crashes upon loading because it contains ES6 code (ES6 import and export). Index Route var ...

The path NPM Package is missing in the package export

For my first NPM package, I've been diving into the manuals and exploring other projects for hours to make everything work. Getting Started with the Project The package successfully builds, generating files for ESM and CommonJS targets. It installs s ...

Support for Chrome in Angular 8

Can someone please advise on the minimum version of Google Chrome that is supported by Angular 8? Additionally, I am looking for a way to prompt users to update their Chrome browser if it doesn't meet the required version. My Angular application seems ...

Error: Unable to locate module: cannot find './node_modules/@material-ui/core/IconButton'

Encountering an error in the browser: Error: Failed to compile ./src/components/layout/search/Searchbar.js Module not found: Can't resolve './node_modules/@material-ui/core/IconButton' in 'C:\Users\Ja\Desktop\ ...

JavaScript library designed for efficient asynchronous communication with servers

Looking for a lightweight JS library to handle AJAX cleanly and simplify basic DOM selections on our website (www.rosasecta.com). Currently, we're manually coding a lot of Ajax functionality which is not only ugly but also difficult to manage. We&apos ...

Can you explain the distinction between using this.example and this.$data.example to retrieve "data" in Vue.js?

Could you explain the distinction between accessing data in vue.js using this.example and this.$data.example? What are the advantages and disadvantages of each method, if any? Take a look at this example that utilizes both: JS: new Vue({ el: '#a ...

Using JQuery Slider to call a function without the need for an ID, instead utilizing the object directly

Currently, I am working on implementing a Slider using JQuery, and I have encountered an issue in my code. The function is set to run when the page loads, creating a slider with the Id specified in the div element: $(function() { $( "#slider& ...

How can I retrieve data from another module's state in Vuex?

I currently have two separate modules: module1.js export default { state: () => ({ array: [ { property: value } ] }) } module2.js export default { state: () => ({ array: [ { property: structuredCl ...

Are several UDP sockets open across various ports?

I'm trying to get the port of a receiving server using the following code snippet: var dgram = require("dgram"); var start = 27015; for(var i = start; i < (start + 100); i++) { var server = dgram.createSocket("udp4"); server.on("message ...

Is there a way to retrieve the list of files from a static public folder using javascript?

I have successfully set up a public folder directory using express and node. For instance, this code works perfectly - var testImage = new Image(); testImage.src = '/images/png/avatar.png'; However, I need to access several images stored ins ...

I am perplexed as to why my useEffect function is executing twice within my NextJs client

I am currently working on a NextJs program and using a function called useAsync on my website. However, I have noticed that this function runs twice every time it is called. I suspect that the useEffect calling the useAsyncInternal might be causing this be ...

Combining Data in React Arrays

I have an array with different group types and I need to merge the results if the grouptype is the same. const locationss = [ { grouptype: "Name1", id: "1", servicetype: [ { name: "Morning", price: "5& ...

Compel a customer to invoke a particular function

Is there a way to ensure that the build method is always called by the client at the end of the command chain? const foo = new Foo(); foo.bar().a() // I need to guarantee that the `build` method is invoked. Check out the following code snippet: interface ...

What is the best approach for transmitting data to the post method of Node.js using AJAX/jQuery?

A UDP server I have is set up to respond with a different message each time it receives a message. When I hard code the message into the variable "message," everything works fine. However, I want the client to be able to manually type in a message, and t ...

Utilize Vue: Bring in the router within a helper class and navigate to a specific

I'm new to utilizing Vue, and I am currently attempting to import my existing router instance into a JavaScript class where I manage the Authentication. This is the content of my router file: import Vue from 'vue'; import Router from &apos ...

ng-options do not refresh automatically when modifying elements in the array

Having trouble updating the data in a select list? It seems that when selecting 'test', the value retrieved from the API is 'ÅšlÄ…sk' even though it's not listed. For example: I select 'test' but it shows as 'ÅšlÄ ...

Execute JavaScript code prior to sending a Rails form

Before submitting the form, I would like to trigger the html5 geolocation javascript code. Here's how I envision the process: upon form submission, the user is prompted with a geolocation popup. After allowing access, the form data should be processed ...

Discovering a way to capture the space bar event in a number input field with JavaScript

Is there a way to capture space bar input with an onchange event in JavaScript? <html> <head> <script type = "text/javascript"> function lala(aa){ console.log(aa + " dasda"); } </script> </head> <body> <input ty ...

Adding Javascript and CSS files to the document dynamically

I've created a custom jQuery plugin, but I need it to verify if jQuery is already loaded. If not, I want the plugin to load jQuery along with a few other necessary JavaScript files. Additionally, I want it to check if a specific CSS file has been load ...