Vue.js 无法使用模板正确呈现 [英] Vue.js does not render correctly using template
问题描述
我正在使用 Vue.js 和 Django.我的目标是显示我通过 REST API 获得的垃圾箱列表.
这是我的 JavaScript 代码:
Vue.component('bin-detail', {模板:'#bin-detail',道具:['bin']});var app = new Vue({el: '#table',数据: {消息:你好",垃圾箱:[]},安装:功能(){$.get('/api/bins/', 函数(数据){app.bins = data.results;})},分隔符:['<%', '%>']});
还有我的 HTML:
<h1><%消息%></h1><table class="table table-hover"><头><tr><th>姓名</th></tr></thead><tr v-for="bin in bins" is="bin-detail" :bin="bin"></tr></tbody><模板id="bin-detail"><tr><td><% bin.name %></td></tr></模板>
消息数据显示正确,但是在收到GET请求后,在渲染页面上的名称仍然是<% bin.name %>.使用Vue-Inspector我可以看到,组件已经生成正确但模板没有更新:任何人的想法,我在做什么错?
解决方案 这是因为在 VueJS 2 分隔符是为每个组件定义的,所以你也必须在组件内部定义它们:
Vue.component('bin-detail', {分隔符:['<%', '%>'],模板:'#bin-detail',道具:['bin']});
I am working with Vue.js and Django. My goal is to display a list of bins, which I get over a REST API.
Here's my JavaScript-Code:
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:
<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:
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:
Vue.component('bin-detail', {
delimiters: ['<%', '%>'],
template: '#bin-detail',
props: ['bin']
});
这篇关于Vue.js 无法使用模板正确呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆