使用 Vue.js 访问子组件中的 api 数据

Question

我正在开发一个大型应用程序，在处理来自 API 的数据并将其传递给我的子组件时遇到了很多麻烦。

情况。

我从父组件调用 API 并通过 prop 将数据传递到我的子组件。子组件显示数据很好，但我无法在子组件的就绪函数中访问数据。

正如您在控制台中看到的那样，在子组件就绪函数中显示数据为我提供了一个空对象...

ready: function(){
    console.log('items from child component', this.items);
}

...但是子组件在我重复的过程中渲染了对象。

所以问题是子组件在父组件的 API 调用完成之前呈现。完成后，它将数据同步到我的子组件，从而渲染得很好。

我试过的

正在我的子组件中观看道具。当道具为 'complete' 时，我可以访问它。但这在尝试修改 prop 中的某些数据时给我带来了很多问题，因为它每次都会渲染。这不是我想要的解决方案。

问题

如何确保在子组件准备就绪时填充 prop？

Answer 1

问题是 DOM 已加载并准备就绪，而 AJAX 函数仍在接收数据。因此组件上的 ready 方法会在结果从服务器返回之前触发。

当数据从服务器返回时，您可以触发一个事件来通知 child：

var item = Vue.extend({
    props: ['items'],
  data:function(){return{items:[]}},
  template: '<div v-for="item in items">{{ item }}</div>',
  ready: function(){

    this.$on('datahere', function(){
        alert(this.items[0].id);
      //console.log('datahere items', this.items);

    })
    //console.log('items from child component', this.items);
  }
})

Vue.component('item', item);

var items = Vue.extend({
    ready: function(){
    this.init();
  },
  data: function(){
    return {
        items: {}
    }
  },
  methods:{
    init: function(){
        this.getItems();

    },
    getItems: function(){
        this.$http.get('https://api.github.com/users/mralexgray/repos')
        .success(function(data){
          this.$set('items', data);
          this.$nextTick(function(){
                this.$broadcast('datahere', data);
          });

          console.log('items from parent components: ', this.$get('items'));
        })
    }
  },
    template: '<div class="test"><item :items.sync="items"></item></test>',
  components: {'item': item}
})

Vue.component('items', items);



var app =  new Vue({
    el: '#app'
})

Answer 2

正如 @Douglas.Sesar 所说，item 组件上的 ready 方法在结果从服务器返回之前触发。

要解决这个问题，您只需添加 activate hook:

var item = Vue.extend({

  activate: function(done) {
    var unwatch = this.$watch('items', function() {
      unwatch(); // teardown the watcher
      done(); // ready to insert the component
    });
  },

  props: ['items'],
  template: '<div v-for="item in items">{{ item }}</div>',
  ready: function(){
    console.log('items from child component', this.items);
  }
})

该挂钩在组件插入之前调用。在调用 done 回调之前不会插入组件。当 items 更改时调用 done 回调（有关详细信息，请参阅 watch）。因此，当调用 ready 函数时，items 将具有正确的数据。

https://jsfiddle.net/kmrfkynf/8/

使用 Vue.js 访问子组件中的 api 数据

Access api data in child component on ready with Vue.js

javascript

api

components

vue.js