Vue.js无法正确使用模板

Question

我正在使用Vue.js和Django。我的目标是显示我通过REST API获取的bin列表。

这里是我的JavaScript代码：

Vue.component('bin-detail', { 
template: '#bin-detail', 
props: ['bin'] 
}); 

var app = new Vue({ 
    el: '#table', 
    data: { 
     message: "Hallo", 
     bins: [] 
    }, 
    mounted: function() { 
     $.get('/api/bins/', function (data) { 
      app.bins = data.results; 
     }) 
    }, 
    delimiters: ['<%', '%>'] 
}); 

而我的HTML：

<div id="table"> 
    <h1><% message %></h1> 
    <table class="table table-hover"> 
     <thead> 
     <tr> 
      <th>Name</th> 
     </tr> 
     </thead> 
     <tbody> 
      <tr v-for="bin in bins" is="bin-detail" :bin="bin"></tr> 
     </tbody> 
    </table> 
</div> 
<template id="bin-detail"> 
    <tr> 
     <td> 
      <% bin.name %> 
     </td> 
    </tr> 
</template> 

消息正确显示数据，但名称保持“<％bin.name％>在渲染页面在收到GET请求后使用Vue-Inspector我可以看到，组件已经正确生成但模板没有得到更新： 任何人的想法，我在做什么GN？

Answer 1

这是因为在VueJS 2个分隔符每个组件定义，所以你必须定义它们的成分里面太：

Vue.component('bin-detail', { 
    delimiters: ['<%', '%>'], 
    template: '#bin-detail', 
    props: ['bin'] 
});