My issue involves using mounted(), along with reloadComparisons(), and this specific tag:
<li v-for="comparison in comparisons">C: [[ comparison.area ]]</li>
The problem arises when the rendering only occurs if comparisons is defined within data. When I load a new array, it fails to work.
I have attempted to use
Vue.set(this.comparisons,comparisons)Any suggestions on what steps could be taken?
EDIT
var app = new Vue({
delimiters: ['[[', ']]'],
el: '#vue',
data: {
comparisons: [{'area': 'xxxx'}],
},
mounted() {
this.reloadComparisons()
},
methods: {
reloadComparisons: function () {
console.log('reloadComparisons');
axios.get("http://127.0.0.1:8000/alex/api/pricemap_comparisons/").then(function (response) {
console.log(response);
if (response.status === 200) {
this.comparisons = response.data.results;
Vue.set(this.comparisons, response.data.results);
console.log(this.comparisons);
}
}).catch()
}
}
});