鍍金池/ 問答/HTML5/ vue2.0 axios數(shù)據(jù)請求成功但是渲染失敗

vue2.0 axios數(shù)據(jù)請求成功但是渲染失敗

vue2.0使用axios請求數(shù)據(jù),在回調函數(shù)里拿到了請求數(shù)據(jù),然后賦值給變量進行循環(huán),但是渲染無效。如果我把數(shù)據(jù)寫死則可以渲染成功。

clipboard.png
下面是代碼

<template>
<div>
    <div v-for="item in objects" class="box">
        <el-row>
          <el-col :span="18">
              <div class="boxCon">
                  <div class="title">{{item.title}}</div>
                  <div class="text">
                      <span class="pubtime">222</span>
                      <span class="reply">{{item.collect_count}}</span>
                  </div>
              </div>
          </el-col>
          <el-col :span="6">
              <div class="grid-content bg-purple-light">
                  <img src="../../static/img/1_02.jpg" class="pic">
              </div>
          </el-col>
        </el-row>
    </div>
</div>
    
</template>
<script>
export default {
  data(){
      return{
          objects:[]
      }
  },
  methods:{
      lookDetail(e){
           var target=event.target;//獲取當前元素
        var dataid=e;//(pl.id的值);//獲取所傳參數(shù)值
    /* this.$router.push({name: 'detail'})  */
      this.$router.push({ path: 'detail',query:{id:dataid} })  
      }
  },
  mounted:function(){
           $.ajax({ 
          url: 'http://api.douban.com/v2/movie/top250', 
          type: 'GET', 
          data:{"start":'0',"count":'10'},
          dataType: 'JSONP', 
          success: function (res) { 
              var self=this;
              console.log(res.subjects);
              self.objects=res.subjects;
          } 
        })
  }
}
</script>

個人覺得渲染無效是因為賦值不成功,但是數(shù)據(jù)又請求回來了,或者是初始化的時候數(shù)據(jù)還沒有請求回來,但是頁面已經渲染完畢造成的。請各位大神多多指點,謝謝

回答
編輯回答
黑與白

clipboard.png

你在這里定義self 和直接用this有區(qū)別?

var self = this 放ajax外面
還有你這用的不是jquery的$.ajax方法嗎?哪來的axios

最后,ES6的鉤子函數(shù)了解一下~

2018年4月15日 02:05