Vuejs2 模板未加载，显示错误[Vue warn]：编译模板时出错：

我正在使用vuejs加载默认列表。当我浏览页面时，它会显示以下错误

[Vue warn]: Error compiling template:

我的html模板如下所示：

<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">
                        <a href="#" v-on:click.prevent="$parent.filterCats($event)" v-bind:data-hash="category.id">{{category.Title}}</a>
                    </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>

Vue.component('Results',{
              template : '#results-template',
              props: ['books','genres']
          })

getBooks : function(){
          var vm = this;
          return $.get('apis.php?gtype=Books')
                        .done(function(d){
                             vm.books    = JSON.parse(d);
                            });
                        }

created : function(){
                        var vm = this;
                        this.getBooks().done(function(){
                           ........
                        });
                    }

VueJs方法如下：

<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">
                        <a href="#" v-on:click.prevent="$parent.filterCats($event)" v-bind:data-hash="category.id">{{category.Title}}</a>
                    </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>

Vue.component('Results',{
              template : '#results-template',
              props: ['books','genres']
          })

getBooks : function(){
          var vm = this;
          return $.get('apis.php?gtype=Books')
                        .done(function(d){
                             vm.books    = JSON.parse(d);
                            });
                        }

created : function(){
                        var vm = this;
                        this.getBooks().done(function(){
                           ........
                        });
                    }

我在加载页面上创建的代码如下：

<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">
                        <a href="#" v-on:click.prevent="$parent.filterCats($event)" v-bind:data-hash="category.id">{{category.Title}}</a>
                    </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>

Vue.component('Results',{
              template : '#results-template',
              props: ['books','genres']
          })

getBooks : function(){
          var vm = this;
          return $.get('apis.php?gtype=Books')
                        .done(function(d){
                             vm.books    = JSON.parse(d);
                            });
                        }

created : function(){
                        var vm = this;
                        this.getBooks().done(function(){
                           ........
                        });
                    }

数据代码：

data : {
          books : []
         }

---

请帮帮我，我做错了什么？

你的图像绑定方式不正确，首先要纠正。替换您的代码：

<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">
                        <a href="#" v-on:click.prevent="$parent.filterCats($event)" v-bind:data-hash="category.id">{{category.Title}}</a>
                    </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>

结果：

使用此代码：

<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">
                        <a href="#" v-on:click.prevent="$parent.filterCats($event)" v-bind:data-hash="category.id">{{category.Title}}</a>
                    </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>

结果：

您必须使用：src=“category.URL”进行图像src绑定，而不是：src=“{category.URL}”

---

其次，在模板调用中，您使用的是“流派”是否初始化了流派数组？这也可能导致错误。首先检查两个原因，如果问题没有得到解决，请进一步检查。

您是否可以将您创建的代码也放在这里，也可以放在VueJsOk中。让我编辑我的帖子并添加创建的代码。我也添加了创建的代码，请检查是的，我也在使用流派数组