[Vuejs]-Vue Js data is not updated inside computed generated elements

by

1👍

✅

It’s about creating reactive data properties in vue 2. If the property is not present in validationErrors object when the component is mounted, then to create it and make it reactive you should use this.$set() utility method. In validateInput method you should check if the property exists, then create it like mentioned:

validateInput(data) {
  const id = data.item.id;
  const value = data.item.weight;

  if (!this.validationErrors[id])
    this.$set(this.validationErrors, id, "");

  // rest of the code
}

I should point that with your current code, even after the user updates the input, the validationErrors properties remain unreactive, the rerendering of the template being most likely triggered by the update of the table cell data.

PS: Another method to overpass the reactivity issue, is to reasign the entire updated object. Like:

validateInput(data) {
  const id = data.item.id;
  const value = data.item.weight;
  
  // Clone the validationErrors object
  let errors = JSON.parse(JSON.stringify(this.validationErrors))

  // update the errors object instead of this.validationErrors

  // ...

  // Reassign the updated object at the end
  this.validationErrors = errors
}
👤Igor Moraru

Leave a comment