Vue doesn't update data local to component during method call

Question

I've got a vue component that will show a calendar week. The component is meant to be modular so it will not know what days are populated with what dates until it's parent component (the month) passes in the data.

My template looks like this:

<div class="cs-week">
    <div class="day" v-for="n in 7">
        <!-- I'm still building it out, so for now I jsut want to show the date -->
        {{ dayLabels[n] }}
    </div>
</div>

The Vue Component looks like this:

module.exports = {
    props:[
        'events',
        'weekdata',
        'weeknumber'
    ],
    data: function (){
        return {
            // initializing each of the day label slots so the view doesn't blow up for not having indexed data when rendered
            dayLabels: [
                null,
                null,
                null,
                null,
                null,
                null,
                null
            ]
        }
    },
    methods:{

        loadWeek: function (){

            for(
                var i = this.weekdata.days[0],
                    j = this.weekdata.dates[0];
                i <= this.weekdata.days[1];
                i++, j++
            ){
                this.dayLabels[i] = j;
            }
        },
        test: function (){
            this.loadWeek();
        }
    }
}

The data being passed to the component from the parent tells it the range of the days to fill and the dates to use:

weekdata: {
    days: [3,6], // start on wednesday, end on saturday
    dates: [1,3] // use the 1st through the 3rd for the labels
}

When I fire this method, the data updates, but the bound elements never update:

The thing is, if I hard code an update to the labels array before I iterate through the loop...

loadWeek: function (){
    debugger;
    this.dayLabels = [1,2,3,3,2,1]; // arbitrary array data assigned
    for(
        var i = this.weekdata.days[0],
            j = this.weekdata.dates[0];
        i <= this.weekdata.days[1];
        i++, j++
    ){
        this.dayLabels[i] = j;
    }
},

... the bound elements will update:

Is there a reason why it won't work without the arbitrary assignment before the loop??

Jeff · Accepted Answer · 2016-02-01 22:09:54Z

1

When you change an array by setting a value in it, Vuejs cannot detect the change and wont fire any on-change methods. See here: http://vuejs.org/guide/list.html#Caveats

You can use the $set() method to change an object in an array, and that will force Vue to see the change. So in your for-loop

this.dayLabels.$set(i, j);

answered Feb 1, 2016 at 22:09

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

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

1 Comment

Chris Schmitz Over a year ago

Awesome. Thanks for the help. Also thanks for referencing the spot in the documentation. I either missed that on my read through or glossed over it mentally.

Collectives™ on Stack Overflow

Vue doesn't update data local to component during method call

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related