Question

我有一个显示日历周的vue组件。该组件是模块化的，因此在它的父组件（月份）传递数据之前，它不会知道哪些日期填充了什么日期。

我的模板如下所示：

<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>

Vue组件如下所示：

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();
        }
    }
}

从父级传递给组件的数据告诉它填充的天数范围和使用日期：

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

当我触发此方法时，数据会更新，但绑定的元素永远不会更新：

问题是，如果我在遍历循环之前硬编码标签数组的更新...

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;
    }
},

...绑定元素将更新：

为什么在循环之前没有任意赋值的情况下它不能工作？

Answer 1

当您通过在其中设置值来更改数组时，Vuejs无法检测到更改并且不会触发任何更改方法。见这里：http://vuejs.org/guide/list.html#Caveats

您可以使用$set()方法更改数组中的对象，这将迫使Vue查看更改。所以在你的for循环中

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

在方法调用期间，Vue不会更新组件的本地数据

1 个答案: