[英]Vue.js does not render correctly using template
I am working with Vue.js and Django. 我正在使用Vue.js和Django。 My goal is to display a list of bins, which I get over a REST API.
我的目标是显示通过REST API获得的垃圾箱列表。
Here's my JavaScript-Code: 这是我的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: ['<%', '%>']
});
And my HTML: 而我的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>
The message data is displayed correctly, but the name stays "<% bin.name %> on the rendered page after the GET request has been received. Using the Vue-Inspector I can see, that the component has been generated correctly But the template does not get updated: 消息数据已正确显示,但在收到GET请求后,名称在呈现的页面上仍为“ <%bin.name%>。使用Vue-Inspector,我可以看到组件已正确生成,但是模板没有更新:
Anyone an idea, what I'm doing wrogn?
有人知道,我在做什么吗?
It's because in VueJS 2 delimiters are defined per component, so you have to define them inside the component too: 这是因为在VueJS 2中,每个组件都定义了分隔符,因此您也必须在组件内部定义它们:
Vue.component('bin-detail', {
delimiters: ['<%', '%>'],
template: '#bin-detail',
props: ['bin']
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.