0

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.
Taha Rehman Siddiqui
  • 2,441
  • 5
  • 32
  • 58
  • I've had a quick look at this and can see that the label and the input are showing different variables based on edit mode or not - This is why the data changes when flicking between. Other than that, I think you're going to have to provide a smaller example for us to look at rather than throwing your whole project at us to debug. – webnoob Nov 13 '17 at 20:56
  • Okay. Will try making a jsfiddle, although the project in github is just one component. The label and input are actually showing the same variables, the input is bind'ed to the actual value of the data model that is bind'ed to the row, and the label is just bind'ed to the same variable in the row. – Taha Rehman Siddiqui Nov 13 '17 at 21:20
  • Never mind, I found the problem – Taha Rehman Siddiqui Nov 14 '17 at 16:01

1 Answers1

0

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.

Taha Rehman Siddiqui
  • 2,441
  • 5
  • 32
  • 58