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

时间:2017-09-19 07:02:32

标签: javascript vue.js vue-component

我有一个显示一组曲目的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: []
            },
    }
});

1 个答案:

答案 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/