我正在尝试将VueJS与我的Django应用程序的前端集成。我在javascript文件中有以下Vue代码:
return (moment(new Date(data)).isValid() ? moment(new Date(data)).format('MMMM Do, YYYY @ h:mm:ss a') : ' -- ');
HTML文件中的以下代码:
window.onload = function() {
Vue.component('discuss-post', {
props: ['post'],
template: `<div class="card">
<div class="grid-x margin-x">
<div class="cell small-4">
<img class="avatar-img" :src="post.by.profile.img_url">
<p style="font-family: Abel;font-size: 24px">{{ post.by }}</p>
</<div>
</div>
<div class="grid-x margin-x">
<div class="cell small-4">
<p style="font-family: Abel;font-size: 18px">{{ post.content }}</p>
</div>
</div>
</div>`
})
var postDiv = new Vue({
el: "#post-div"
})
}
但是,当我加载页面时,我在控制台中收到了这些错误:
CodePen of a stripped-down example
我的代码中可能导致引发这些错误的内容是什么?
答案 0 :(得分:5)
信息不够清晰吗?您的代码中的 </<div>
是什么?
另一方面,如果要传递对象,请使用v-bind
。 {{ }}
用于文字插值。
答案 1 :(得分:5)
要编译模板错误,请删除/修复此标记:</<div>
。
此外,您必须将道具传递给子组件,如下所示:
<discuss-post :post="post"></discuss-post>
对于您的个人资料值错误,您必须检查数据中的JSON结构。
请参阅以下示例:
Vue.component('discuss-post', {
props: ['post'],
template: `<div class="card">
<div class="grid-x margin-x">
<div class="cell small-4">
<img class="avatar-img" :src="post.by.profile.img_url" />
<p style="font-family: Abel;font-size: 24px">{{ post.by }}</p>
<div>
</div>
<div class="grid-x margin-x">
<div class="cell small-4">
<p style="font-family: Abel;font-size: 18px">{{ post.content }}</p>
</div>
</div>
</div>`
})
var postDiv = new Vue({
el: "#post-div",
data: function() {
return {
post: {
content: "Post Content",
by: {
profile: {
img_url: "http://www.gstatic.com/webp/gallery/1.jpg"
}
}
}
}
}
})
&#13;
<script src="https://vuejs.org/js/vue.min.js"></script>
<div class="card-section">
<div id="post-div">
<discuss-post :post="post"></discuss-post>
</div>
</div>
&#13;
答案 2 :(得分:2)
根据@Leo的回答,使用</<div>
更正</div>
假设你的vue实例中有一个对象“post”
你可以像
一样绑定它<discuss-post :post="post"></discuss-post>
你的帖子必须是
post ={
"by":{
"profile":
{
"img_url":"some url"
}
},
"content":"some content"
};