javascript - 如果模型被覆盖，Vue.js 指令 v-html 不会更新

Question

通过运行以下代码(一个 Vue.js 组件)，我希望在 AJAX 调用返回后，v-html 指令和 console.log() 显示相同的值。

相反，即使 obj.html 具有不同的值，v-html 仍然卡在“加载中...(1)”，因为 console.log() 确认。

该行为是由于 getObject 覆盖了 obj，并且之后 obj.html 在 getHTML< 之前的短时间内未定义 返回(所有这些都发生在函数 created 中)。

有人可以解释一下这是 Vue 想要的行为吗(欢迎使用文档链接)，或者我是否应该提交错误报告，或者最后我是否只是以错误的方式构建我的代码？

提前致谢

<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

函数 getObject 返回一个 String 所以在创建的钩子(Hook)的第一行

this.obj = await this.getObject()

您更改了 obj 的引用并使其指向一个字符串，然后您尝试将一个属性放在一个字符串上，但这是行不通的 ;)

这就像你会做的那样
this.obj = '测试'
然后
console.log(this.obj);
//测试

然后是
this.obj.abc = 'whatever'
console.log(this.obj.abc);
//未定义

您需要先解析对象，参见 JSON.parse(string)

更新:如果不是这种情况，即您以某种方式有一个来自该服务的对象。那么我能想到的唯一问题是你丢失了原始 obj 的引用并且 v-html 仍然指向旧的。在那种情况下，你必须避免修改根 obj 或者你可以使用 vue $set 方法:https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats