Unable to update a property with a new value in Vue.js when using the keyup.enter event on an input element bound to that property

I am facing an issue with inputs that have the @keyup.enter event assigned to a method that is supposed to reset the value of variables bound to these inputs to null. Here is an example of my code:

methods:{

    clear: function () {
        this.something1 = null;
        this.something2 = null;
    }

},


<input type="text" v-model="something1" @keyup.enter="clear">
<input type="text" v-model="something2" @keyup.enter="clear">

Strangely, the input that received the keyup event does not get cleared while the other input works fine. How can I resolve this issue?

javascriptvue.js

Answer №1

The provided code appears to be functioning correctly, even without the need for preset data. It seems that there may be another underlying issue causing the problem.

new Vue({
  el: 'body',
  methods: {
    clear: function() {
      this.something1 = null;
      this.something2 = null;
    }
  }
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<input type="text" v-model="something1" @keyup.enter="clear">
<input type="text" v-model="something2" @keyup.enter="clear">

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

Identifying Changes in Form Values Using jQuery

I am facing a challenge with a dynamic form that needs to detect the field sequence properly. Below is my JavaScript file: var i = 1; $("a.add-line").click(function(){ $("div.items").append( $('<div>').attr('id',&ap ...

javascriptjquery

Detecting when an object exits the proximity of another object in ThreeJS

In my ThreeJS project, I have planes (Object3D) flying inside a sphere (Mesh). My goal is to detect when a plane collides with the border of the sphere so that I can remove it and respawn it in a different location within the sphere. I am wondering how I ...

javascriptthree.jscollision-detectionbounding-box

Error: The "use client" component does not recognize either window or localStorage

I'm currently working on creating a wrapper function that can be used in every dashboard component. "use client"; const UserWrapper = ({ children }) => { const user = JSON.parse(window.localStorage.getItem("ysg_u")); retur ...

javascriptnext.js

Acquiring a property from an object that is specified within a function

I have created an object with properties inside a function: function createObject() { const obj = { property1: value, property2: value } } How can I access this object from outside the function? Would redefining it like ...

javascriptnode.js

Using PHP to send asynchronous requests to the server can greatly enhance

I have almost completed my project, but I am facing an issue with reading the data sent to the server. function main() { jQ(document).on("keyup", "form input", function () { var data = new FormData(); var value = jQ(this).val(); da ...

javascriptphpjqueryajax

Having trouble accessing the loadTokenizer function in Tensorflow JS

As a beginner with Tensorflow.js concepts, I recently attempted to tokenize a sentence using the Universal Sentence Encoder in Javascript. You can explore more about it on Github Reference $ npm install @tensorflow/tfjs @tensorflow-models/universal-sentenc ...

javascriptnpmpackagetokenizetensorflow.js

The element is implicitly classified as an 'any' type due to the index expression not being of type 'number'

Encountering a specific error, I am aware of what the code signifies but unsure about the correct interface format: An error is occurring due to an 'any' type being implicitly assigned as the index expression is not of type 'number'. ...

javascripttypescriptvue.js

What is the best way to implement the useCallback hook in Svelte?

When utilizing the useCallback hook in React, my code block appears like this. However, I am now looking to use the same function in Svelte but want to incorporate it within a useCallback hook. Are there any alternatives for achieving this in Svelte? con ...

javascripthtmlreactjstypescriptsvelte

"Unveiling the mystery of ejs form submissions with undefined values

I'm facing a bit of difficulty and need some guidance. I am attempting to develop a URL shortener using Node, Express, and Ejs. However, I'm encountering an issue where my EJS form is sending undefined values. Below is the snippet of my EJS code ...

javascriptnode.jsexpressundefinedejs

What is the process for incorporating the 'url-regex' npm package into an Angular(2/4) project?

I'm currently working on a project with Angular 4 and I've run into some issues while trying to use the url-regex package within my Component. After some troubleshooting, I discovered that this approach seems to work: import * as urlRegex from ...

javascriptangularnpmwebpackecmascript-6

comparing multiple values separated by commas with JavaScript

I need validation using a comma-separated value format. Within the illustration, there are two fields: "Saloon Price" (value: 10,10,10,10) and "Saloon Offer Price" (value: 11,11,11,11). The first value must be less than the second. Saloon price Value & ...

javascriptphpjqueryhtml

What benefits does React offer that jQuery does not already provide?

What sets ReactJS apart from jQuery? If jQuery can already handle everything, why should we use React? I've tried to research on Google but still don't have a clear answer. Most explanations focus on terms like "views," "components," and "state" ...

javascripthtmlcssreactjsdom

Encountering difficulties while trying to access the SQLite database file through a JavaScript Axios GET request

Having trouble opening an sqlite DB file from a js axios.get request which is resulting in an exception message being outputted to the console. The request is supposed to call my PHP controller to retrieve data from the DB and return it json-encoded. On t ...

javascriptphpvue.jssqliteaxios

Is it possible to set a different default page index other than 0 in a material table using reactjs?

I have noticed that the default page index in the material table is set to '0', but the API I am currently using begins with a page index of '1'. Is there a way to adjust the default page index of the table to match that of the API? ...

javascriptreactjspaginationmaterial-uimaterial-table

Guide on sending an AJAX request to a server

I'm currently working on implementing AJAX and have encountered a roadblock. Specifically, I need assistance with sending a request to the server when a user clicks on a specific image, expecting the server to return that image. While I know how the s ...

javascriptajax

Combining Extjs combo with autocomplete functionality for a search box, enhancing synchronization capabilities

When using autocomplete search, I've encountered an issue. If I type something and then make a mistake by deleting the last character, two requests are sent out. Sometimes, the results of the second request come back first, populating the store with t ...

javascriptajaxextjscombobox

What is the best way to structure a JSON object to support conditional statements?

My goal is to develop a JSON object capable of handling conditionals/branching. My workflow involves multiple steps where the user's choices determine the subsequent set of options. This branching logic continues throughout different stages. I envisi ...

javascriptjson

Adding an existing element to the DOM using Javascript/jQuery

I am facing an issue in my DOM where I have an element with two children, a div block and a button. My goal is to add a new copy of the same div block to the parentNode whenever the button is clicked. Currently, I am using the following code in the button ...

javascriptjqueryhtmldom

What is the process for compiling Vue.js and Vue.min.JS?

I'm currently trying to wrap my head around the directives responsible for generating the output file(s) /dist/vue[.min].js. Upon examining the contents of the node_modules folder, I stumbled upon the /dist and /src directories. Inside the /src direct ...

vue.jsvuejs2transpiler

Challenges with passing array values between Vue3 components

Having an issue with arrays in vue3 that is puzzling me. Upon loading components, an initial array is passed. These values are then watched for changes within the components which works seamlessly. The scenario involves a little game where the user maneuv ...

vue.jsvuejs3