В Vue. js Веб-страница не обновляется при изменении состояния через обновление во вложенных объектах? - PullRequest
Новая
       21

В Vue. js Веб-страница не обновляется при изменении состояния через обновление во вложенных объектах?

0 голосов
/ 01 апреля 2020

В Vue. js есть методы; Vue .set для добавления и Vue .delete для удаления, но для 'update' нет методов Vue, вместо этого вы используете Object.assign. На самом деле это работает нормально, если во вложенных объектах нет изменений. Есть ли в Vue какая-либо функция, например, update или refre sh, потому что я вижу состояние, измененное на вкладке Chrome Vue Extension, но не вижу изменения на веб-странице.

Vue view не запускается для обновлений.

Пример: когда я добавил элемент в «дома», я не вижу новый дом на странице, даже я вижу новый элемент поверх проверки Vue, состояние , Я могу увидеть новый элемент при перезагрузке страницы. 

    "clients": {
    "oES4H0IMsYaCvGkSDKLmXkOkgXR2": {
        "CL_937fef22-cee7-4b14-9e4d-4e6751c82dab": {
            "name": "Adina Dowless",
            "email": "adinadowless@test.com",
            "phone": "(547) 515 53 91",
            "houses": {
                "0": {
                    "name": "sugarless",
                    "uavt": "832677187473",
                    "housePolicyId": "PO_7f12d27f-245b-41a6-92b4-dacb0256ccac",
                    "daskPolicyId": "PO_f5fba094-7272-41f8-a406-f9251df5a37f"
                },
                "1": {
                    "name": "intersexualism",
                    "uavt": "931095588844",
                    "housePolicyId": "PO_2d6b79d2-53a0-42f9-8445-df06c3b3bc5a",
                    "daskPolicyId": "PO_79f37178-0714-4c19-aa24-204ea3cf30e7"
                }
            }
        },
    }

Редактировать: Я использую Quasar Framework, Vuex Library и Firabase Realtime Database.

Итак, этот клиентский объект в хранилище vuex и исходные данные поступают из базы данных Firebase.

При добавлении клиента: Vue.set(state.clients, payload.id, payload.client) При удалении клиента: Vue.delete(state.clients, id) При обновлении клиента: Object.assign(state.clients[payload.id], payload.updates)

Эти функции работают правильно при добавлении, удалении или обновлении свойств первого уровня клиентов, таких как имя или по электронной почте,

При добавлении нового дома в дома запускается обратный вызов базы данных firebase databse child_changed для клиентов со всеми обновленными данными, но компонент на веб-странице не обновляется.

1 Ответ

1 голос
/ 01 апреля 2020

Вам не нужен специальный метод для выполнения обновлений. Это то, что Vue делает самостоятельно. Но Vue отслеживает только те ключи , которые присутствуют при создании компонента.

Добавление нового свойства к существующему объекту не отслеживается Vue.

Вам необходимо использовать Vue .set при добавлении новых свойств объекта поэтому Vue знает, как отслеживать и новые свойства.

Поэтому я думаю, вам следует использовать Vue.set для объекта house или Object.assign для создания нового объекта.

Примечание: кажется, что вы используете houses в качестве объекта, когда, вероятно, лучше использовать его в качестве массива. Если вы измените его на массив и используете Array.push, то Vue будет отслеживать изменения. Если вы хотите назначить новые элементы массиву с указанным индексом c, вы должны использовать Vue .set для массивов .

...