It's been a while since I've dealt with Vue.Js, so my memory is a bit fuzzy. I'm facing an issue where I can't seem to modify a data array within a function that is called in the created hook.
My goal is to create a multidimensional array with the months of the year as keys and the data (retrieved from this.data.data which is a prop) as values. The component code provided here is a shortened version. I know that this.data.data returns the required array of objects, and console.log(this.fixtures); correctly displays the built data.
Below is the code snippet for the project:
data: function(){
return {
fixtures: []
}
},
created() {
this.setFixtureMonths(this.data.data);
console.log(this.fixtures);
},
methods: {
setFixtureMonths: function (collection) {
let vm = this;
collection.forEach(function(element) {
let d = new Date(element.date);
let m = d.toLocaleString('default', {month: 'long'}).toLocaleLowerCase();
vm.$set(vm.fixtures, m, element);
});
}
}
However, upon checking the view render and using the Vue Devtools extension, I noticed that fixtures remains empty even though it's being logged correctly by the console. After going through the documentation, I understand that the conventional way of assigning arrays doesn't work, so I've resorted to using vm.$set to build the array.
If anyone could offer some insight on how to get the view to render the fixtures properly, I would greatly appreciate it.
Thank you!