Vue.js 未使用模板正确呈现

Question

我正在使用 Vue.js 和 Django。我的目标是显示一个 bin 列表，我通过 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>

消息数据显示正确，但在收到 GET 请求后，名称仍保留在呈现页面上的 "<% bin.name %>。使用 Vue-Inspector 我可以看到，该组件已正确生成但模板未更新：有人知道我在做什么吗？

Answer 1

这是因为在 VueJS 2 中，分隔符是按组件定义的，所以您也必须在组件内部定义它们：

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

Vue.js 未使用模板正确呈现

Vue.js does not render correctly using template

javascript

vue.js

vue-component

vuejs2