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

Question

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

Answer 1

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

你可以使用Vue.set(this.data_object, "serial", response.data)它向 vue 注册它，这样它就会向这个变量添加观察者，它会变成反应性的

或者

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

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

这是一个关于 Vue 反应性的链接