我怎么能填充的Axios公司获得的数据数组并把它传递给Vuejs组件道具做列表呈现在组件(how c

由于我有一个组件调用上载CSV

Vue.component('upload-csv',{
 props:['clientnames'],
 template:`
    <ul>
       <li v-for="clientname in clientnames">{{ clientname.name }}</li>
    </ul>
 `
});

然后，Vue的实例

new Vue({
 el:"#upload-csv-component",
 data:{
  loadurl:'http://localhost/startup/public/index.php/loadnames',
  clientnames:[]
 },
 mounted:function(){
  axios.get(this.loadurl)
  .then(function(response){
   this.clientnames = response.data;
  })
  .catch(function(error){});
 }
});

希望用这种方式

<div id="upload-csv-component">
  <upload-csv :clientnames="clientnames"></upload-csv>
</div>

但是列表中没有呈现; 我已经改变了安装钩子beforeMount但列表中没有渲染。

请某人提出一个方法来解决这个问题。

Answer 1:

使用箭头功能，以保持访问this的Axios公司要求内部：

mounted(){
  axios.get(this.loadurl)
  .then((response) => {
    this.clientnames = response.data
  })
}

（伟大的答案在这里有关this方面）

Answer 2:

这样看来，爱可信需要脂肪箭头语法，如下所示
使用爱可信消费的API

 console.clear(); Vue.component('upload-csv',{ props:['clientnames'], template:` <ul> <li v-for="clientname in clientnames">{{ clientname.name }}</li> </ul> ` }); new Vue({ el:"#upload-csv-component", data () { return { loadurl:'https://jsonplaceholder.typicode.com/users', clientnames:[] } }, mounted:function(){ axios.get(this.loadurl) .then(response => { console.log(response); this.clientnames = response.data; }) .catch(function(error){}); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script> <div id="upload-csv-component"> <h1>Clients</h1> <upload-csv :clientnames="clientnames"></upload-csv> </div> 

文章来源: how can i populate an axios get data array and pass it to a Vuejs component props to do list rendering in the component