我有一个显示一组曲目的Vue模板,但我的网站没有加载。控制台说
财产或方法"追踪"未在实例上定义,但在呈现期间引用。确保在数据选项中声明反应数据属性。 (在根实例中找到)
我确定这个问题与父子vue实例关系或者这些问题有关,但我不太确定,因为我只是开始了解vue。 JS
我读过这个https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events,但我很难看到问题所在。出了什么问题?
这里是html中的模板:
<div id="vue-div">
<template v-for="track in spotifyResults.items">
<spotify :track="track"></spotify>
</template>
<!-- spotify vue template -->
<script type="text/x-template" id="spotifyResult">
<tr>
<td>
<img :src="track.album.images[2].url"/>
</td>
<td>${track.artists[0].name}
</td>
<td>${track.album.name}
</td>
<td>${track.name}
</td>
<td>
<a :href="track.uri">Play</a>
</td>
<td><span v-on:click="add_track_to_library(track.album.images[2].url, track.artists[0].name, track.album.name, track.name, spotify, track.uri, none)">+</span></td>
</tr>
</script>
</div>
这是js:
var spotify = {
template: '#spotifyResult',
delimiters: ['${', '}'],
props: ['track']
}
self.vue = new Vue({
el: "#vue-div",
delimiters: ['${', '}'],
unsafeDelimiters: ['!{', '}'],
components: {
spotify: spotify,
},
data: {
spotifyResults: {
items: []
},
}
});
答案 0 :(得分:0)
您正在错误地定义组件模板。 Vue正在尝试将您的#spotifyResult
模板呈现为<template>
块。
要使用X-Templates,请使用
<script type="text/x-template" id="spotifyResult">
<tr>
<!-- etc -->
</tr>
</script>
此<script>
代码需要放在您的主.html
文件中,放在根元素之外。
JSFiddle演示〜https://jsfiddle.net/7u0aboe6/3/