How to prevent blur from overwriting the value of an event with its previous value

Utilizing a common function to update the values of two inputs, here is an example:

<b-input
    v-model="ownerProps.approver2ExtraCost"
    @blur="onClick($event)"
    class="inputBuefy"
  ></b-input>
</div>
<b-input
    class="inputBuefy"
    @blur="onClick($event)"
    v-model="ownerProps.approver3ExtraCost"
  ></b-input>
</div>

Although they have distinct v-models, I am using the same method to modify their values in my methods property.

onClick(e) {
  console.log(e.target.value);
  e.target.value = "dfg";
}

The issue arises when updating one input and encountering leftover values from previous entries. For instance:

If 'ABC' is typed into the first input

then replaced with 'dfg'

Subsequently, if 'HIJ' is entered in the next input

the first input retains its prior value of 'ABC'

when it should have kept 'dfg'

Answer №1

It seems like the issue lies in setting the value of the element instead of updating the bounded variable, which is what you should be doing.
Therefore, when vue "refreshes", it will update the input.

Here is a better approach:

<b-input
    v-model="ownerProps.approver2ExtraCost"
    @blur="onClick(2)"
    class="inputBuefy"
  ></b-input>

<b-input
    class="inputBuefy"
    @blur="onClick(3)"
    v-model="ownerProps.approver3ExtraCost"
  ></b-input>

Make sure to update your function as follows:

onClick(id) {
  if (id === 2) ownerProps.approver2ExtraCost = "dfg";
  if (id === 3) ownerProps.approver3ExtraCost = "dfg";
}

It would be ideal to have those elements stored in an array and send the index of the element you want to change.

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

The error ElementNotVisibleError occurs in Selenium::WebDriver when attempting to use the send_key function with a Chrome browser, as the element is not currently visible

A problem has arisen with the Ruby Selenium script I am running in parallel. The issue occurs when attempting to send text input through send_key on a webpage while using the Chrome browser. Selenium::WebDriver::Error::ElementNotVisibleError: element not ...

Sharing and showcasing files directly from a local directory

Recently diving into NodeJS and web development, I've successfully used multer to upload a single file within my web application. The file gets uploaded to my "uploads" folder flawlessly, and now I'm planning on storing the file path in my databa ...

Saving a picture to local storage with the file input type in ReactJS

I am attempting to save an image in the browser storage once a user selects an image from their computer. <div className="add_grp_image_div margin_bottom"> <img src={img_upload} className="add_grp_image"/> <input type="file" class ...

Adjusting Media Queries according to the browser window's zoom level

Is there a way to detect the browser width dynamically? For instance, can I adjust the CSS styling based on zoom adjustments like ctrl + or ctrl -? By "box," I am referring to a perfectly square shape. So, when the browser width is 100%, I want a layout wi ...

What is the best way to display components in VueJS?

I am looking to dynamically render a component based on my variables with the following code: <div>{{ auth ? <AuthCorrect /> : <AuthIncorrect /> }}</div> However, my application is currently rendering it like this: {{ auth ? auth ...

Is there a way to eliminate nested or parent objects from an array using JavaScript?

I am looking for a way to remove an object based on its id without using a MongoDB query. Instead, I want to remove the object from an array stored in a variable using a JavaScript function. For example, if I provide id=ObjectId("5b693e7ddd65ec16a46b7f82" ...

Implementing JWT in Laravel using Vue.js

I've been exploring how to implement authentication in a spa context using a jwt token, specifically through a Register / Login / Logout process. After researching online and implementing tymon jwt on the Laravel side, I find myself uncertain about wh ...

Is the concept of Controlled and Uncontrolled Components in VueJs similar to that of React?

When it comes to React, there is a distinction between controlled and uncontrolled components explained in detail at this link. Controlled components function within the React model where state is managed in the virtual DOM. In contrast, uncontrolled com ...

Trying to work through solving the issue of accessing document.frames["someframe"].function in Chrome instead of IE

I am encountering an issue with my code that is working in Internet Explorer but not in Chrome. try { top.document.frames["myFrame"].compare(); } catch(err) { alert("This is not executed."); } Any suggestions on how to resolve this compatibility pr ...

Error: Attempting to assign a value to 'onclick' property of null object [Chrome Extension]

window.onload = function() { document.getElementById('item_save').onclick = function() { var item_name = document.getElementById('item_name').value; var item_size = document.getElementById('item_size').value; v ...

Can you increase all px measurements in Notepad++ by a factor of X?

Looking for help with a large HTML image map that contains over 3000 lines of images with specific top/left pixel positions. I'd like to replace these images with larger ones, which would require increasing all the pixel references by a certain amount ...

Using JavaScript to set attribute values in Python Selenium, these values are cleared after each update

Assuming : for i in list('{}'.format(value)): self.browser.execute_script( "arguments[0].setAttribute('value', '{}');".format(i.replace('&b ...

Tips for capturing the current terminal content upon keypress detection?

After successfully installing the terminal on a test page, I am looking to highlight matching parentheses within it. This is similar to what is done in this example: I have a working solution in place and now need to integrate it with the terminal. ...

How about optimizing HTML by utilizing jQuery's magic?

For my website, I aim to allow users to choose a grid size by clicking on elements of a large grid display. This can be compared to selecting a table size in Microsoft Word. Each grid element will have a designated position ID for organization. Instead of ...

Using 'interface' declarations from TypeScript is unsupported in JS for React Native testing purposes

I have a ReactNative app and I'm attempting to create a test using Jest. The test requires classes from a native component (react-native-nfc-manager), and one of the needed classes is defined as follows export interface TagEvent { ndefMessage: N ...

The prop type 'lg' supplied to 'ForwardRef(Grid)' is not valid and has failed

This particular code snippet is responsible for managing the layout of components on the webpage. However, I have encountered some warning messages in the console: Warning: Failed prop type: The lg prop provided to ForwardRef(Grid) is invalid, it should ...

Unable to retrieve AJAX response

I've been working on a page where I'm using AJAX to fetch data based on the selection of radio buttons. The three options available are 'Unapproved', 'Approved' and 'All'. My goal is to display the corresponding user ...

Is there a problem with textbox support for multi-line strings?

I'm having trouble getting a textbox to display multiple lines of text. For instance, when I copy three lines of text from Microsoft Word and paste it into the textbox, only the first line appears. The other two lines are not showing up, and I'm ...

Display or Conceal Content Depending on the Button's Status

I am currently working on implementing an accordion style button for a project. I have configured my component to hide the list when the button is clicked, but I am encountering an issue where the list does not reappear. Additionally, I would like to inc ...

I'm getting an error message like, "Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. Can you please help

Ever since upgrading my vue.js to version 3.4.4, I've been encountering a new warning in the browser console: The feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined. As I am running the esm-bundler build of Vue, it requires th ...