Строка данных Vue q-input не сохраняет значения объекта модели

См. лазурную ссылку для встроенного кода и ссылка github для исходного кода. Чтобы объяснить сценарий, у меня есть q-datatable от Quasar Framework. Поскольку у меня есть вложенные данные, я заполняю первичные данные в сворачиваемом цикле for, а вторичные данные в содержимом сворачиваемого как объекта данных. На странице также есть переключатель Режим редактирования / просмотра чуть ниже фильтров справа. Я отформатировал столбцы таблицы данных для отображения q-input в режиме редактирования и только текста в режиме просмотра. Выполните следующую операцию, чтобы воспроизвести ошибку. Шаги 5 и далее - это шаги, вызывающие неожиданное поведение.

  1. Разверните одну из строк на ссылке (открыть в новом окне вручную).
  2. Переключите переключатель «Редактировать / Просмотр», который находится чуть ниже фильтров.
  3. Пробуем редактировать любую строку. Наблюдаемый результат: значения сохраняются в текстовых полях при выходе из фокуса, а также в ярлыках, когда режим страницы изменяется обратно на режим просмотра.
  4. Добавьте новую строку, нажав кнопку «Добавить», расположенную чуть ниже заголовка строки.
  5. Попробуйте ввести любое текстовое поле во вновь добавленной строке и перейти к текстовому полю ext. Наблюдаемый результат: значения не сохраняются в текстовом поле и не отображаются в ярлыках при переходе в режим просмотра.
  6. Измените режим обратно на режим просмотра, а затем обратно в режим редактирования. Наблюдаемый результат: значения отображаются в текстовых полях в режиме редактирования, но не в режиме просмотра.
  7. Добавьте новую строку. Наблюдаемый результат: теперь значения ранее добавленных строк отображаются как в режиме редактирования, так и в режиме просмотра.

person Taha Rehman Siddiqui    schedule 13.11.2017    source источник
comment
Я быстро взглянул на это и вижу, что метка и ввод показывают разные переменные в зависимости от режима редактирования или нет - вот почему данные меняются при переключении между ними. Помимо этого, я думаю, вам придется предоставить нам меньший пример, а не бросать нам весь свой проект для отладки.   -  person webnoob    schedule 13.11.2017
comment
Хорошо. Попробую сделать jsfiddle, хотя проект в github - это всего лишь один компонент. Метка и вход фактически показывают одни и те же переменные, вход привязан к фактическому значению модели данных, которая привязана к строке, а метка просто привязана к той же переменной в строке.   -  person Taha Rehman Siddiqui    schedule 14.11.2017
comment
Неважно, я нашел проблему   -  person Taha Rehman Siddiqui    schedule 14.11.2017


Ответы (1)


Проблема была в методе AddRow. В документации указано, что vue может отслеживать изменения только объектов с определенными свойствами. В методе AddRow я добавлял в модель пустой объект данных. Добавление свойств с нулевыми значениями устранило проблему.

person Taha Rehman Siddiqui    schedule 14.11.2017