My Vue 1 component requires an object as a prop that needs to be filled by the user. This object has a specific structure with properties and nested inputs.
The component is essentially a modal with a table containing necessary inputs. I want to perform validations, calculations, and style changes based on user input.
When the modal is loaded, I set the models of the inputs using their unique ids like this:
v-model="object.inputs[subgroup[1].dx.mob.id].comment"However, despite setting values, the page does not re-render correctly. The <input> fields do not retain the values, disappearing once clicked away.
I have tried various solutions like dynamically building watchers for each input or returning inputs in a computed property, but none seem to work effectively. Even manually triggering this.$forceUpdate() does not update the page as expected.
The only workaround I found was to recreate the component entirely, which is not ideal due to performance issues.
If anyone has a better solution, I would greatly appreciate it!
Temporary Fix: Despite multiple failed attempts, I found an unconventional approach to forcing the component to re-render by utilizing a new variable called
key.This involves creating an
updatefunction tied to the@blurevent of every input/select element, triggering a change in thekeyvalue and ultimately prompting a re-render of the component.... data: function() { return { ... , key: 0 }; }, ... methods: { ... , update: function(){ this.key = this.key == 0 ? 1 : 0 } }, computed: { ... , testData: function () { var data = [] var __self = this var blu = this.key // Reading the key here triggers the re-render console.log(blu) this.test.inputs.forEach(function(input){ var slug = input.slug.replaceAll('#', '').split('-') __self.setItem(data, slug, input) }) console.log('data', data) return data } }