Vue component loses input when asynchronous call updates another property

Question

I have a component that has an <input> with a :value set to a certain property. The component has another property unrelated to this input, which can get updated asynchronously (AJAX call). Whenever you're typing inside the input and the asynchronous call finishes, updating the other property, your typed input is reset.

To recreate this problem I've created a jsfiddle using a setInterval to simulate the async call and increment the other passed property. Try typing in the input, it will get reset every second. If you're quick enough, you can tab out and cause the @change to trigger the actual update.

The question is: why is the update to the other prop invalidating/rerendering the component and how can I work around this?

Note that v-model="person.name" is not a valid solution here - I need to know the old and new value, which is why I'm using a manual :value/@change combo.

Edit: The updateName method also really only needs to be triggered when the user leaves the input field. This is because the code run inside it is relatively CPU intensive and only needs to run when the user is done with the input and leaves it (in my actual code, not the jsfiddle).

Edit2: Is there some way to not let it re-render the entire component, but only the relevant pieces?

Laurens · Accepted Answer · 2020-09-25 18:00:30Z

5

Because the parent component is changing a property of the child component, it has to re-render (parts of) the child component. Since you are using @change, instead of @input, your changes are not saved yet to the reactive variable person.name, it only works if you click tab quick enough. One solution would be to change @change to @input (which better resembles v-model):

https://jsfiddle.net/mf67xq1e/

Another (better) option is to use v-model and use a watcher to retrieve both the old and the new value:

  watch: {
    // whenever person.name changes, this function will run
    "person.name": function (newName, oldName) {
      console.log("newName:", newName);
      console.log("newName:", oldName);
    }
  }

https://jsfiddle.net/mf67xq1e/1/

EDIT: As you mentioned you only need to trigger something when you blur/leave the input field, seperate the reactivity of the variable and the triggering of your other method (e.g. updating some other variable or something), in two seperate variables:

https://jsfiddle.net/ta9cgnx0/

EDIT 2: Cleaner option with v-model and a seperate call for your other trigger on blur:

https://jsfiddle.net/ay1g63u8/

edited Sep 25, 2020 at 18:00

answered Sep 25, 2020 at 14:35

Laurens

2,61713 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Grillparzer Over a year ago

Thanks, while mostly valid, I really only need to trigger the updateName() when the input is blurred. Debouncing isn't an option either. Edited my post to reflect this.

Laurens Over a year ago

Couldn't you use the v-model or input method to only update the model all the time and then on change you copy it over to a new reactive variable? I'll try to make a jsfiddle in a bit

Collectives™ on Stack Overflow

Vue component loses input when asynchronous call updates another property

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related