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

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

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

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

    "clients": {
    "oES4H0IMsYaCvGkSDKLmXkOkgXR2": {
        "CL_937fef22-cee7-4b14-9e4d-4e6751c82dab": {
            "name": "Adina Dowless",
            "email": "[email protected]",
            "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 и базу данных Firabase Realtime.

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

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

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

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


vue.js quasar-framework
person Alpha    schedule 01.04.2020    source источник
comment
instead you use Object.assign, нет. Вы просто назначаете напрямую знаком =.   -  person Mat J    schedule 01.04.2020
comment
Как вы добавляете элемент в houses? Если это новое свойство, просто используйте set.   -  person skirtle    schedule 01.04.2020
comment
Я использую базу данных firebase, поэтому добавляю элемент в «дома» поверх, api базы данных firebase, при обратном вызове «child_changed» для «клиентов». Итак, даже если я добавляю объект, я пытаюсь справиться с этим в мутации обновления.   -  person Alpha    schedule 01.04.2020

Ответы (1)


arrow_upward
2
arrow_downward

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

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

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

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

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

person Radu Diță    schedule 01.04.2020
comment
Спасибо за ваш ответ, это очень поучительно, кстати, я думаю, что пропустил некоторую информацию о проблеме, например, я использую фреймворк quasar и библиотеку vuex, я обновлю свой вопрос. - person Alpha; 01.04.2020