Question

我通过动态道具动态地将父级数据绑定到子级（objectives是一个通过AJAX获取的数组）：

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

在objective-selector的{{1}}挂钩中，我希望做一些预处理，不知怎的ready()是一个可观察的，而不是一个数组：

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'] });道具作为数组）。如何在ready（）中以数组形式访问它？

Answer 1

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

另一个解决方案是使用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中访问子组件的ready（）内的动态道具

1 个答案: