如何在 VueJS 中的 child 组件的 ready() 中访问动态道具

Question

我已经通过动态属性将 parent 的数据动态绑定到 child（objectives 是一个通过 AJAX 获取的数组）：

<objective-selector :objectives="objectives"></objective-selector>

在 objective-selector 的 ready() 钩子中，我想做一些 pre-processing 并且不知何故 this.objectives 是一个可观察的，而不是一个数组：

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']
});

其他一切正常（例如，我可以使用 objectives 道具作为模板中的数组）。如何在 ready() 中将其作为数组访问？

Answer 1

您的 ready 函数在 ajax 响应从服务器返回之前按顺序触发。所以你需要在之后触发该功能。

一个简单的方法是 $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;
               }
        }
    });
}

另一种解决方案是使用 watch（每次目标更改时都会触发）：

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

如何在 VueJS 中的 child 组件的 ready() 中访问动态道具

How to access dynamic props inside a child component's ready() in VueJS

vue.js