Vue.js 如何访问子组件内的动态道具'；VueJS中的s ready（）

我已经通过动态道具将父级数据动态绑定到子级（

objectives

是通过AJAX获取的数组）：

---

其他一切都很好（例如，我可以在模板中将

目标

道具用作数组）。如何将其作为ready（）中的数组访问？

在ajax响应从服务器返回之前，您的

ready

函数将按顺序启动。因此，您需要在之后启动该函数

一种简单的方法是，当值从父级返回时，

$broadcast

compiled: function(){
    this.$on('theDataCameBackFromTheServer',function(){
        for (var i =0; i < this.objectives.length; ++i) {
               if (this.objectives[i].active == false) {
                   this.current_selected = i;
                   break;
               }
        }
    });
}

---

您的代码看起来是正确的。如果您

console.log（objectives）

内部准备好了，您看到了什么，在传入组件之前，该组件外部是否相同？请注意，在for循环中使用

++i

将使其跳过数组中的第一个条目，如果要全部检查，请使用

i++

Vue.component('objective-selector',{
   template: '#objective-selector-template',
   data:function() {
       return {
            current_selected:0
       }
   },
   ready:function(){
        // set current selected to the first non-active objective
       for (var i =0; i < this.objectives.length; ++i) {
           if (this.objectives[i].active == false) {
               this.current_selected = i;
               break;
           }
       }    
    },
   props: ['objectives']
});

compiled: function(){
    this.$on('theDataCameBackFromTheServer',function(){
        for (var i =0; i < this.objectives.length; ++i) {
               if (this.objectives[i].active == false) {
                   this.current_selected = i;
                   break;
               }
        }
    });
}

watch: {
     objectives: function(){
          for (var i =0; i < this.objectives.length; ++i) {
           if (this.objectives[i].active == false) {
               this.current_selected = i;
               break;
           }
       } 
     }
}