Vue 数据表行 q-input 不持久化模型的值 object

Question

请参考the azure link for the built code and github link for the source code。为了解释这个场景，我有一个来自 Quasar Framework 的 q-datatable。因为我有嵌套数据，所以我在可折叠循环中填充主要数据，在可折叠内容中填充辅助数据作为数据表。该页面还有一个 Edit/View 模式 开关，就在右侧的过滤器下方。我已将数据表的列格式化为 q-input 在 编辑模式 中显示，在 查看模式中仅显示文本。请执行以下操作以重现错误。第 5 步及以后的步骤是产生意外行为的步骤。

1. 展开 the link(open in new window manually) 处的其中一行。
2. 切换过滤器下方的 Edit/View 开关。
3. 正在尝试编辑任意行。 观察到的结果：这些值在离开焦点时会保留在文本框中，并且在页面模式更改回查看模式时也会保留在标签中。
4. 单击行下方的“添加”按钮添加新行 header。
5. 尝试在新添加的行中的任意文本框中键入内容，然后移至下一个文本框。 观察到的结果：当更改为查看模式时，这些值不会保留在文本框中，也不会显示在标签中。
6. 将模式更改回查看模式，然后再更改回编辑模式。 观察到的结果：值在编辑模式下显示在文本框中，但在查看模式下不显示。
7. 添加一个新行。 观察到的结果：现在以前添加的行值显示在编辑和查看模式中。

Answer 1

问题出在 AddRow 方法中。文档中说 vue 只能跟踪对具有已定义属性的对象的更改。在 AddRow 方法中，我向模型添加了一个空数据对象。添加具有空值的属性解决了这个问题。