Vue 属性未在模板实例中定义

Question

我有一个显示一组曲目的 Vue 模板，但我的网站没有加载。控制台说

属性或方法“track”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明反应数据属性。 （在根实例中找到）

我确定这个问题与父子 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: []
            },
    }
});

Answer 1

您错误地定义了组件模板。 Vue 正在尝试将您的 #spotifyResult 模板呈现为 <template> 块。

要使用X-Templates，请使用

<script type="text/x-template" id="spotifyResult">
  <tr>
    <!-- etc -->
  </tr>
</script>

这个<script>标签需要放在你的主.html文件中，根元素之外。

JSFiddle 演示~https://jsfiddle.net/7u0aboe6/3/