Input value reverts after being updated via javascript action

Ask us anything
1

I am having a hard time reseting an inputs init value when it’s located in a collection and i refresh the collections data source

issue/context:

  1. my collection comes from xano and is a list of data without any text in the logo field
  2. i have an input in each cell of the collection and a button
  3. on button press, i send a request to xano to update that records logo field and refresh the collection of items without text in logo field
  4. i clear the inputs text using javascript (also have set it to “reset” explicitly)
  5. the new collection items appear in the cells
  6. the input reverts to the previous text when i click into it AFTER having updated the inputs value via javascript

seems like for the purpose of timesake, i can use a popup modal to do the editing of data and resetting of input after submission more cleanly but there must be a way to do what i am describing in the video.

2

This does not have the effect you think. Every input is managed by the vue app. Any direct manipulation of the DOM will not change the internal state of the app. Next time vue decides to render the element it will do it with its internal state, and for vue the value of the input is the last thing you entered, not the direct value change with javascript.
To programmatically change/reset the input you need to bind the value to a variable and change the variable itself.
See here and here for some example.

2 Likes
3

this makes a lot of sense why direct manipulation doesnt work! thank you!

the input’s init value is bound to a value. i bind the input to a value from the collection, same as the text elements. are you suggesting it needs to be binded to an external (not the collection element) variable?

4

If is bound to the collection item it will be updated when refetching the collection. If it is bound to a variable it will be updated every time you change the variable (e.g. empty value to reset it, new arbitrary value ecc)
In both cases you act on the corresponding data in weweb with workflows.

5

it wasnt updating correctly via a collection refetch :man_facepalming: but it is working now via the variable bound method…weird