Question

我使用Jquery ajax加载数据，形成外部API成功，v-for文本也没有问题。

Vue的

var vm = new Vue({
  el:'.inlinePoetry',
  data:{
      PoetryList:[]
  },
  created:function(){
      var self = this;
      $.ajax({
          url: "api/poetry.json",
          dataType:'json',
          type: 'GET',
          data: "data",
          cache: false,
          ifModified: true,
          success: function getData(data){
              self.PoetryList = data.PoetryList;
          },
          error: function(result){ console.log('error'); }
      })
  }

})

HTML

<div class="inline_frame" v-for="(item,index) in PoetryList">
    <div class="inline_content" :id="Poetryid">
        <div class="letter">
            <div class="letter-t">Title</div>
            <div>{{item.letterFirst}}</div>
            <div>{{item.letterSecond}}</div>
        </div>
        <div class="letter">
            <div class="letter-t">Description</div>
            <div>{{item.letterThird}}</div>
            <div>{{item.letterForth}} <a :href="PoetryLink">click me</a> </div>
        </div>

    </div>
</div>

但是当我在html标签中绑定href和id时，它有问题。 :id="Poetryid"和:href="PoetryLink"使用计算。

computed:{
  Poetryid:function(){
      // console.log(self.PoetryList.id);
      // return self.PoetryList.id;
      for(var i=0;i<PoetryList.length;i++){
          return PoetryList[i].id
      }
  },
  PoetryLink:function(){
      console.log(self.PoetryList.link);
      return self.PoetryList.link;
  }
}

我尝试使用for来运行Poetryid，我的根显示error during evaluation。请给我一些建议，谢谢！

Answer 1

首先，这只会在返回前进行一次迭代，前提是PoetryList.length >= 1

// returns return PoetryList[0].id everytime
for(var i=0;i<PoetryList.length;i++){
    return PoetryList[i].id
}

为什么你不能直接在这里访问item.id？

<div class="inline_content" :id="item.id">

同样适用于PoetryLink？

<div>{{ item.letterForth }} <a :href="item.link">click me</a> </div>

我怎么能用Vue绑定ajax数据

1 个答案: