VueJS道具在组件中未定义

时间:2017-09-16 02:46:52

标签: javascript django vuejs2 vue-component

我正在尝试将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

我的代码中可能导致引发这些错误的内容是什么?

3 个答案:

答案 0 :(得分:5)

信息不够清晰吗?您的代码中的 </<div> 是什么?

另一方面,如果要传递对象,请使用v-bind{{ }}用于文字插值。

答案 1 :(得分:5)

要编译模板错误,请删除/修复此标记:</<div>。 此外,您必须将道具传递给子组件,如下所示:

<discuss-post :post="post"></discuss-post>

对于您的个人资料值错误,您必须检查数据中的JSON结构。

请参阅以下示例:

&#13;
&#13;
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;
&#13;
&#13;

答案 2 :(得分:2)

根据@Leo的回答,使用</<div>更正</div> 假设你的vue实例中有一个对象“post”

你可以像

一样绑定它
<discuss-post :post="post"></discuss-post>

你的帖子必须是

post ={ 
    "by":{
         "profile":
          {
           "img_url":"some url"
          }
         },
    "content":"some content" 
     };