Clicking on a Vue input field will reset its content

I am dealing with an input field that is set up like this:

<input type="text" name="avr" value="{{ arv  | currency}}" v-model="arv  | currency">

The corresponding data model is defined as follows:

data: {
   avr: '', 
}

To populate the data, a request is made in the ready function like so:

this.arv =  this.meta[i].metadata_value;

While everything seems to be functioning correctly and the correct value is displayed in the input field, I am facing an issue where clicking on the input field clears out the number completely. This behavior is not desired, as users should be able to simply click and change a number without losing the existing value.

If I remove v-model="arv | currency", the input field behaves as expected, but then my Watch function stops working properly.

Answer №1

Avoid using the currency filter within the v-model and consider removing the value="{{ avr | currency }}" since the v-model will handle the value automatically.

To ensure proper formatting, convert the request to currency format before assigning it to the variable like this:

<input type="text" name="avr" v-model="avr">

Then, on ready:

this.avr = formatToCurrencyFn(this.meta[i].metadata_value);

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

Slideshow elements removed

I attempted to remove my links individually from the div id="wrapper", but unfortunately have encountered an issue while doing so: window.onload = function () { setInterval(function () { var wrapper = document.getElementById("wrapper"); var my_l ...

What is the best method for extracting specific information from cookies using JQuery?

Currently, I am developing a straightforward to-do list. I store the tasks in cookies and retrieve them when the web page reloads. However, I am facing an issue where I can't save the tasks that have been marked as completed. function toHTML(id, text ...

Display/Conceal Content with Checkbox Utilizing jQuery

I have been attempting to create a section of an HTML form that will display or hide based on the status of a checkbox. Here is the key code snippet I am using: <script src="/js/jquery.js"></script> <script language="JavaScript"> fun ...

How to change a CSS 'left' property using Jquery or Javascript

Upon examining my DOM, I found the following element: <div id="itemEditor" class="quoteItemEditorView partType_MATERIAL editMode selectorEnabled" style="left: -1px; right: 0px; width: auto; min-width: 480px; display: block;" > I have b ...

What is the process for altering an SVG image following a click event in Javascript?

I have a tab within a div that includes text and an svg icon as shown herehttps://i.stack.imgur.com/TjwIK.png When I click on the tab, it expands like this https://i.stack.imgur.com/XNuBi.png After expanding, I want the svg icon to change to something e ...

Can I use a custom font in an HTML5 canvas?

Has anyone had success importing a custom font for use in HTML5 canvas? I've been trying to do this by loading the font file on my computer, but all my attempts have failed so far. The canvas keeps showing the default font instead of the one I want to ...

`Can you share some tips on serving image files to frontend using Spring Data REST?`

I am currently working on developing a web app for a movie database that requires each movie to have a poster image. I am facing challenges in serving images to the frontend using Spring Data REST. Movie.java import lombok.AccessLevel; import lombok.Data ...

Printing to the console: the array is empty and contains just one element simultaneously

I've encountered an issue regarding the console.log function that seems related to a specific case I found... JavaScript array length problem Upon checking my console, I noticed this output: https://i.stack.imgur.com/AbCdE.png The code snippet in ...

Determining the Nearest Date in an Array Using JavaScript

In my array, I store information about each day as an object. For example: {day_year: "2012", day_month: "08", day_number: "03", day_name: "mon"} To enhance the day objects, I have included a timestamp attribute using the following function: function co ...

Fade-in loader with centered placement on the full page

As a newcomer to programming, I wanted to implement a loader that displays a centered loading animation when the page loads or refreshes. The animation should gray out and fade the entire page until it fully loads. I've managed to get everything else ...

Execute an ajax function when a form is submitted on Marketo

My Request I am seeking assistance with integrating a Marketo script in a WordPress plugin. Upon submission of the Marketo form, I need to perform calculations using the form elements and display the results on the page. Please provide suggestions on ho ...

Fetching data in React using AJAX

I am in the process of developing a React Component that will display data retrieved from an AJAX call. Here's my scenario - I have a Jinja Flask back end hosted on AWS API Gateway, which requires custom headers and the Authorization header to serve H ...

An issue arose during the process of bringing a vue-cli application into another repository

After developing a component library using vue-cli 3, I incorporated it into another repository to make use of the components. Unfortunately, I am now encountering the following error: Uncaught Error: Module build failed: Error: Couldn't locate prese ...

When I type in the TextBox, the CheckBox value should be deactivated if it is unchecked

Whenever I attempt to input text into the textbox associated with my checkbox, the checkbox automatically becomes unchecked. How can I prevent this from happening? <span id="TRAVEL_TYPE_1"><input id="TRAVEL_TYPE_0" type="checkbox" onclick="Update ...

Is there a way to work around coursera's keyboard input verification using JavaScript?

Is it possible to bypass Coursera's keyboard input verification using JavaScript? For example: What methods or techniques could be used to accomplish this? ...

The print function is being triggered before the partial view

My goal is to open a partial view in a new window and call the print function, but I'm facing an issue where the partial view renders after the print function, resulting in a blank page. I attempted using the $timeout function, but encountered the sam ...

Triggering AJAX call from several buttons within a single page in Django

Hey there! I'm currently working on implementing a voting feature using Ajax in my Django-based website. The issue I'm facing is that users can only vote on the first entry, but I want them to be able to vote on all entries. Can you assist me wit ...

Encountering an issue: Unable to load resources - Server returned a status code of 500

Struggling with implementing ajax code in my app development. I've encountered an issue where the ajax code that works fine in the video tutorials I'm following doesn't seem to work for me. It's really frustrating! Here is a snippet of ...

Unpacking and reassigning variables in Vue.js 3 using TypeScript

I am working with a component that has input parameters, and I am experimenting with using destructuring assignment on the properties object to reassign variables with different names: <script setup lang="ts"> const { modelValue: isSelected ...

Is it possible for Webpack's DefinePlugin.runtimeValue to access the module's entry point?

https://i.sstatic.net/D0XMT.png Similar to this, I am looking to utilize the DefinePlugin in order to define a global variable ECZN for my application using the Webpack runtimeValue. Additionally, the WebpackModuleInfo is retrieved from the file where I ...