HTML in Vue.js not updating after axios get request. HTML is:
<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).
If I look in chrome dev tools Vue, I can see the data object does update and populate with the correct information. But it doesn’t update in the html on the page.
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
Advertisement
Answer
The property serial
is never declared on the vue instance and therefore is not reactive.
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
or
declare the serial property on the data object
data(){ return{ data_object: { serial: "" }, } },