Search code examples
vue.jsdata-persistence

Vue datatable row q-input not persisting values of model object

Please refer to the azure link for the built code and github link for the source code. To explain the scenario, I have a q-datatable from Quasar Framework. Since I have nested data, I am populating primary data in a collapsible for loop and secondary data in the content of collapsible as a datatable. The page also features an Edit/View Mode toggle just below the filters on the right. I have formatted the columns of the datatable to show q-input when in Edit Mode and just text in View Mode. Please do the following operation to reproduce the error. Steps 5 and onward are the steps producing unexpected behavior.

  1. Expand one of the rows at the link(open in new window manually).
  2. Toggle the Edit/View toggle which can be found just below the filters.
  3. Trying editing any row. Observed Result: The values do persist in the text boxes on leaving focus, and also in the labels when page mode is changed back to View mode.
  4. Add a new row by clicking on Add button found just below the row header.
  5. Try typing in any of the text boxes in the newly added row and move to the ext text box. Observed Result: The values do not persist in the text box neither do they show in the labels when changed to View Mode.
  6. Change mode back to View Mode and then back to Edit Mode. Observed Result: Values do show in the text boxes in edit mode but not in the View Mode.
  7. Add a new row. Observed Result: Now the previously added row values show in both Edit and View Modes.
Solution

  • The problem was in the AddRow method. It is stated in the documentation that vue can only track changes to objects with defined properties. In the AddRow method I was adding an empty data object to the model. Adding properties with null values fixed the issue.