vue.js - VueJS 从 AJAX 调用加载数据并将其传递给没有 v-if 的子组件

Question

我正在使用 ajax 在根 Vue 实例中加载数据并尝试将其传递给子组件。而且我得到了未定义的数据。当然，这是因为 ajax 调用的异步性质而发生的，所以我的问题是如何在不使用 v-if 渲染阻塞子组件的情况下做到这一点。最好的做法是什么。

这是我的演示应用程序 - https://codepen.io/xblack/pen/jXQeWv?editors=1010

Vue.component('child-one',{
  template:'#child-one',
  props:['mydataOne'] 
});

Vue.component('child-two',{
  template:'#child-two',
  props:['mydataTwo'] 
});

let app = new Vue({
  el:'#app',
  data:{
    welcome:'Hello World',
    mydata:null
  },
  methods:{
    getdataApi:function(){
      var self = this;
      $.getJSON( "https://jsonplaceholder.typicode.com/users", function( data ) {
        self.mydata = data;
      }); 
    } 
  },
  created:function(){
    this.getdataApi();
  },
  mounted:function(){ 
    this.getdataApi();
    console.log('api data->',this.mydata);
  }
});

标签： vue.js

Answer 1

这是主要原因： https ://stackoverflow.com/a/54163297/523630

您的mydataOneandmydataTwo属性应该在组件mydata-one的mydata-twohtml 片段中，如下所示：

<div :mydata-one="mydata"></div>

这是您的代码的工作片段：

https://codepen.io/anon/pen/Jwewde?editors=1010

Vue.component('child-one',{
  template:'#child-one',
  props:['one'] 
});

Vue.component('child-two',{
  template:'#child-two',
  props:['two']
});

let app = new Vue({
  el:'#app',
  data:{
    welcome:'Hello World',
    mydata:null
  },
  methods:{
    getdataApi(){
      $.getJSON( "https://jsonplaceholder.typicode.com/users", (data) => {
        this.mydata = data;
      }); 
    } 
  },
  mounted:function(){ 
    this.getdataApi();
  }
});