[英]HTML in Vue.js not updating after axios get request updates object's property
HTML in Vue.js not updating after axios get request. Vue.js 中的 HTML 在 axios 获取请求后未更新。 HTML is:
HTML是:
<span @click="tryResponse">
Data_object: {{ data_object }} <br>
Data_object.serial: {{ data_object.serial }} <br>
</span>
data:数据:
data(){
return{
data_object: {},
}
},
method:方法:
methods: {
tryResponse() {
axios.get('http://127.0.0.1:8000/source/groups/15').then((response) => {
this.data_object.serial = response.data});
}
This is all happening in a file called App.vue (if that is important).这一切都发生在一个名为 App.vue 的文件中(如果这很重要的话)。
If I look in chrome dev tools Vue, I can see the data object does update and populate with the correct information.如果我查看 chrome 开发工具 Vue,我可以看到数据对象确实更新并填充了正确的信息。 But it doesn't update in the html on the page.
但它不会在页面上的 html 中更新。
Edit: Everything works fine if I do:编辑:如果我这样做,一切正常:
this.data_object = response.data
But the problem comes when I do this:但是当我这样做时问题就来了:
this.data_object.serial = response.data
The property serial
is never declared on the vue instance and therefore is not reactive.属性
serial
永远不会在 vue 实例上声明,因此不是反应式的。
You could use Vue.set(this.data_object, "serial", response.data)
this registers it with vue so it will add observers to this variable and it will become reactive您可以使用
Vue.set(this.data_object, "serial", response.data)
将其注册到 vue 中,以便将观察者添加到此变量中,并且它将变为反应式
or或者
declare the serial property on the data object在数据对象上声明串行属性
data(){
return{
data_object: {
serial: ""
},
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.