テンプレートを使用してVue.jsが正しくレンダリングされない

Question

Vue.jsとDjangoで作業しています。私の目標は、ビンのリストを表示することです。ビンのリストは、REST APIで取得します。

は、ここに私の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％>」のままさVue-Inspectorを使用すると、コンポーネントが正しく生成されたことがわかります。しかし、テンプレートは更新されません。 誰かのアイデア、私が何をやっているのかwro gn？

Answer 1

VueJSに2つの区切り文字は、コンポーネントごとに定義されているためですので、あなたがあまりにもコンポーネント内に定義する必要があり：それは

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