如何訪問內部動態道具子組件的ready（）在VueJS

我有動態綁定父母的可以通過動態道具子數據（objectives是一個數組，通過AJAX是牽強）：如何訪問內部動態道具子組件的ready（）在VueJS

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

內在objective-selector的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'] 
});

其他一切工作正常（我可以使用道具objectives作爲數組中的TEM例如板）。我如何在ready（）中以數組的形式訪問它？

來源

2016-01-07 Extrakun

您的代碼看起來正確。如果你在'console.log（目標）'裏面準備好了你看到的東西，並且在你傳入它之前在這個組件之外是一樣的嗎？ – Jeff

注意，在for循環中使用'++ i'會使其跳過數組中的第一個條目，如果你想檢查它們全部使用'i ++' – Jeff

您的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; 
      } 
     } 
    } 
}

來源

2016-01-07 16:46:48

如何訪問內部動態道具子組件的ready（）在VueJS

回答

相關問題