Vue屬性未在模板實例中定義

Question

我有一個顯示一組曲目的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: [] 
      }, 
    } 
}); 

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/