Директива vue.js v-html не обновляется, если модель перезаписана

Question

Запустив следующий код (компонент Vue.js), я ожидаю, что после возврата вызова AJAX и директива v-html, и console.log() отобразят одно и то же значение.

Нанапротив, v-html застрял с «loading ... (1)», хотя obj.html имеет другое значение, как подтверждает console.log().

Поведение вызвано getObject перезаписью obj и быть потом obj.html неопределенным в течение короткого времени, прежде чем getHTML вернется (все это происходит в функции created).

Может кто-нибудь объяснить, является ли это желаемым поведением Вю (документссылки приветствуются), или я должен представить отчет об ошибке, или, наконец, просто ли я плохо структурирую свой код?

Заранее спасибо

<template>
    <main v-html="obj.html || 'loading... (1)'">
    </main>
</template>

<script>
export default {
    name: 'Post',

    data: function () {
        return {
            obj: {
                html: 'loading... (2)'
            }
        }
    },

    created: async function () {
        this.obj = await this.getObject()
        this.obj.html = await this.getHtml()
        console.log(this.obj.html)
    },

    methods: {
        getObject: async function () {
            const resp = await this.$http.get('https://jsonplaceholder.typicode.com/todos')
            return resp.body[0]
        },
        getHtml: async function () {
            const resp = await this.$http.get('https://jsonplaceholder.typicode.com/todos')
            return resp.body[0].title
        },
    }
}
</script>

Answer 1

Кажется, что объекты данных vue не являются глубоко реагирующими, что означает, что изменение свойства не вызовет обнаружение изменений в шаблоне.

Попробуйте переставить хук created для компоновки полного объекта перед назначением егосвойство данных.Таким образом, когда шаблон реагирует, он увидит свойство html obj.

Ref CodeSandbox

created: async function () {
  const fetchedObj = await this.getObject()
  fetchedObj.html = await this.getHtml()
  this.obj = fetchedObj;
  console.log(this.obj.html)
},

Answer 2

Функция getObject возвращает String, поэтому в первой строке созданного хука

this.obj = await this.getObject()

вы меняете ссылку на obj и делаете ее указывающейв строку, а затем вы пытаетесь поместить свойство в строку, которое не работает;)

это как если бы вы сделали
this.obj = 'test'
затем
console.log(this.obj);
// test

, а затем
this.obj.abc = 'whatever'
console.log(this.obj.abc);
// undefined

Вам необходимо проанализировать объект раньше, см. JSON.parse(string)

Обновление: если это не так, то есть какой-то объект поступает из этой службы.Тогда единственная проблема, о которой я могу подумать, это то, что вы теряете ссылку на свой исходный obj, а v-html все еще указывает на старый.В этом случае вам следует избегать модификации корня obj или использовать метод vue $set: https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats