Javascript 模板的实例中未定义Vue属性

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

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

我肯定这个问题与父子vue实例关系或类似的问题有关，但我不太确定，因为我才刚刚开始了解vue.js

我读了一遍，但我很难看出问题出在哪里。怎么了

以下是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>

---

您定义的组件模板不正确。Vue正试图将您的

#spotifyResult

模板呈现为

块

使用，你使用

这个

标记需要放在主

.html

文件中，根元素之外

---

jsFIDLE Demo ~

你把

@Stephan-v放在哪里了？我已经把它放在了vue分区中，谢谢你指出了这一点！我做了更改，但仍然收到相同的错误消息。我编辑了原始帖子以反映更改。@user2030942未看到任何更改。请立即检查。我忘了存我的钱了changes@user2030942正如预期的那样，您已将
标记放在根Vue元素中。不要那样做
var spotify = {
        template: '#spotifyResult',
        delimiters: ['${', '}'],
        props: ['track']
    }

self.vue = new Vue({
    el: "#vue-div",
    delimiters: ['${', '}'],
    unsafeDelimiters: ['!{', '}'],
    components: {
        spotify: spotify,
    },
    data: {
        spotifyResults: {
                items: []
            },
    }
});

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