Utilizing Jquery ajax to load data from an external API has been successful and the v-for text is also working without any issues.
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>
However, I am encountering an issue when trying to bind the href and id in my html tags.
The :id="Poetryid" and :href="PoetryLink" are using computed properties.
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;
}
}
I have tried using the for loop to run Poetryid, but my console shows error during evaluation.
Any advice on how to resolve this would be greatly appreciated, thank you!