时间戳

首页 > 解决方案 > 在 axios 获取请求更新对象的属性后，Vue.js 中的 HTML 未更新

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

问题描述

Vue.js 中的 HTML 在 axios 获取请求后未更新。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

标签： javascriptvue.jsaxios

解决方案

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

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

或者

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

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

这是关于 Vue 中反应性的链接

推荐阅读