Question

我正在使用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>

我正在使用API来获取数据。当我检查API响应时，它正确显示我的响应，但vuejs没有在模板中显示数据。我的VueJs代码如下：

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

和VueJs方法如下：

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 : []
         }

请帮帮我，我在做什么？

Answer 1

你的绑定图像不正确首先使其正确。替换你的代码：

<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 =＆＃34; category.URL＆＃34; 进行图片src绑定：src =＆＃34; {{category.URL}}＆＃34; 其次在模板调用中，您使用的是＆＃34;类型＆＃34; 您是否初始化了类型数组？这也可能导致错误。如果问题未能进一步解决，请先检查两个原因。

模板未加载显示错误[Vue警告]：编译模板时出错：

1 个答案: