Question

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

财产或方法＆＃34;追踪＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。（在根实例中找到）

我确定这个问题与父子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/

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

1 个答案: