I've been racking my brain over this issue. Vue is new to me and I'm stumped as to why it's not functioning correctly.
This is my template...
<template>
<div>
<div v-if="loading" class="loading">Loading...</div>
<div v-if="dbhs">
<h1>adfoij</h1>
<p class="mb-0" v-if="dbhs.length === 0">
You have not added any DBHs.
</p>
<div v-else>
<div v-for="dbh in dbhs">{{dbh.dbh}} - {{dbh.count}}</div>
</div>
</div>
</div>
</template>
And this is my script...
<script>
export default {
data() {
return {
loading: true,
dbhs: null
};
},
created() {
this.retrieveDbhs();
},
methods: {
ajaxAxiosGetFunc: async function (url) {
var output = '';
await axios({
method: 'post',
url: url,
data: {},
responseType: 'json',
})
.then(function (response) {
//output = JSON.parse(response.data);
output = response.data;
}.bind(this))
.catch(function (error) {
console.log('ajax error');
});
return output
},
getDbhs: async function(){
var estimate_id = document.getElementById('estimate_id').value
var output = await this.ajaxAxiosGetFunc('/estimate/'+estimate_id+'/getTreesSummary/dbh');
this.dbhs = output;
console.log(output);
this.loading = false;
},
}
}
</script>
The data is coming back from the API and shows up in the console, but the length of dbhs remains at 0.
Any suggestions or solutions?