在 axios 获取请求更新对象的属性后，Vue.js 中的 HTML 未更新答案

【问题标题】：HTML in Vue.js not updating after axios get request updates object's property在 axios 获取请求更新对象的属性后，Vue.js 中的 HTML 未更新
【发布时间】：2020-02-05 12:49:06
【问题描述】：

在 axios 获取请求后，Vue.js 中的 HTML 没有更新。 HTML 是：

<span @click="tryResponse">
        Data_object: {{ data_object }} <br>
        Data_object.serial: {{ data_object.serial }} <br>
</span>

数据：


  data(){
    return{
        data_object: {},
    }
  },

方法：


methods: {
    tryResponse() {
        axios.get('http://127.0.0.1:8000/source/groups/15').then((response) => {
                this.data_object.serial = response.data});

}

这一切都发生在一个名为 App.vue 的文件中（如果这很重要的话）。

如果我查看 chrome 开发工具 Vue，我可以看到数据对象确实更新并填充了正确的信息。但它不会在页面上的 html 中更新。

编辑：如果我这样做，一切正常：

this.data_object = response.data

但是当我这样做时问题就来了：

this.data_object.serial = response.data

【问题讨论】：

标签： javascript vue.js axios

【解决方案1】：

属性 serial 从未在 vue 实例上声明，因此不是响应式的。

您可以使用 Vue.set(this.data_object, "serial", response.data) 将其注册到 vue 中，以便将观察者添加到此变量并变为反应式

或

在数据对象上声明串行属性

 data(){
    return{
        data_object: {
            serial: ""
        },
    }
  },

Here's a link about reactivity in Vue

【讨论】：