等axios返回vue组件再渲染

 1 <template id="temp1">
 2         <div>
 3             <ul v-for="item,index in result" >
 4                 <li>
 5                     <div class="picOpt">
 6                         <p class="pic">
 7                             <img :src="item.allPics[0]" alt="">
 8                         </p>
 9                         <p class="opt">
10                             <span>编辑图片</span>
11                             <span :class="[index==0?downArr:upArr]"  @click="action"></span>
12                         </p>
13                     </div>
14                     <div class="txt">
15                         <h2>{{item.Title}}</h2>
16                         <h3>{{item.Author}}</h3>
17                         <h5>{{item.Abstract}}</h5>    
18                     </div>
19                 </li>
20             </ul>
21         </div>
22     </template>
23     <!--content start 注意 isloading--> 
24 <div class="content" id="box"> 25 <component :is="dtemp" :attritem="items" :upArr="upArr" :downArr="downArr" v-if="isloading"></component> 26 </div>
 1 Vue.prototype.$ajax=axios;
 2 var vm=new Vue({
 3     el:'#box',
 4     data:{
 5         upArr:'arr up',
 6         downArr:'arr down',
 7         dtemp:'t1',
 8         url:'dd.json',
 9         items:[],
10         isloading:false
11     },    
12     created:function(){
13         this.getData()
14     },
15     methods:{
16         getData:function(){
17             var vm=this
18             vm.$ajax.get(this.url)
19                  .then(function(response){
20                        vm.items=response.data
21                       vm.isloading=true;
22                       console.log(vm.items)    
23                 })
24     
25         }
26     },
27     components:{
28         t1:{
29             props:['attritem','upArr','downArr'],
30             template:'#temp1',
31             data:function () {
32                 return {
33                     result:this.attritem,
34                     upArr:this.upArr,
35                     downArr:downArr
36                 }
37             },
38             methods:{
39                 action:function(){
40                     console.log("hello")
41                 }
42             }
43         }
44     }
45 })

 

posted @ 2017-11-08 14:31  一步一步往前走  阅读(46)  评论(0)    收藏  举报