Template is not loading showing error [Vue warn]: Error compiling template: - vuejs2

Question

I'm loading default listing using vuejs. When I browse page it show me following error
[Vue warn]: Error compiling template:
My html template is as bellow:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img v-bind:src="{{category.URL}}" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
I'm using API to get data. When I inspected API response it's showing me response correctly but vuejs is not showing data in template. My VueJs code is as bellow:
Vue.component('Results',{
template : '#results-template',
props: ['books','genres']
})
and VueJs method is as bellow:
getBooks : function(){
var vm = this;
return $.get('apis.php?gtype=Books')
.done(function(d){
vm.books = JSON.parse(d);
});
}
My created on loading page code is as bellow:
created : function(){
var vm = this;
this.getBooks().done(function(){
........
});
}
Code for data :
data : {
books : []
}
Please help me what's wrong I'm doing?

Answer 1

Your are binding image incorrect way first of all make it correct. Replace your code:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img :src="category.URL" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
with this code:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img v-bind:src="{{category.URL}}" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
You've to use :src="category.URL" for image src binding not :src="{{category.URL}}"
Secondly in template call you are using "genres" have you initialized genres array or not? this may also cause for error. 1st check both of causes if problem not solved the check further.