Unable to build array in component data after created event

Question

I haven't worked with Vue.Js in some time so my memory is a little rusty. I seem to have an issue where I unable to modify a data array within a function called within the created hook.

What I'm trying to do is build a multidimensional array with the months of the year as the key, and the data (this.data.data which is a prop) as the value. This is a shortened version of the component. I know this.data.data is returning the array of objects required and console.log(this.fixtures); also outputs the built data.

The code for the project can be seen below.

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 on render of the view and checking the Vue Devtools extention, I notice that fixtures remains empty even thought it is being logged by the console correctly. Looking through the documentation I'm aware the conventional assignment of array doesn't work, so I've resorted to using vm.$set as a means to build the array.

Can someone share some insight for me please on how to get the view to render the fixtures?

Thanks

vm.fixtures is an Array, but it's using the string m to index into the Array; that won't do anything in JavaScript since Array indices are always numbers. Should fixtures be an Object? — Ross Allen
– Ross Allen, Commented Mar 19, 2020 at 16:16
@Ross Allen and there goes to show why my background is in php, i'll give it a try! — Juakali92
– Juakali92, Commented Mar 19, 2020 at 16:17

Juakali92 · Accepted Answer · 2020-03-19 16:32:29Z

1

Had a slight moment forgetting novice JavaScript principles

replacing:

vm.$set(vm.fixtures, m, element);

to:

vm.fixtures[m] = element;

did the trick.

answered Mar 19, 2020 at 16:32

Juakali92

1,1439 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bruno Francisco · Accepted Answer · 2020-03-19 18:57:34Z

0

To follow up on your own answer you can improve your code a little bit by doing the following:

setFixtureMonths: function (collection) {
        collection.forEach((element) => {

            let d = new Date(element.date);
            let m = d
                    .toLocaleString('default', {
                        month: 'long'
                    })
                    .toLocaleLowerCase();


            this.$set(vm.fixtures, m, element);

        });
    }

by replacing the anonymous function by an arrow function you will have access to the parent context, therefore no need to have let vm = this;

answered Mar 19, 2020 at 18:57

Bruno Francisco

4,2426 gold badges37 silver badges78 bronze badges

Collectives™ on Stack Overflow

Unable to build array in component data after created event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related