javascript - VueJS Prop 在组件中未定义

Question

我正在尝试将 VueJS 与我的 Django 应用程序前端集成。我在 javascript 文件中有以下 Vue 代码:

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"
    })
}

以及 HTML 文件中的以下代码:

            <div class="card-section">
                {% for feed in feeds %}
                {% for post in feed %}
                <div id="post-div">
                    <discuss-post post="{{ post }}"></discuss-post>
                </div>
                {% endfor %}
                {% endfor %}
            </div>

但是，当我加载我的页面时，我在控制台中收到以下错误:

我的代码中有什么可能导致出现这些错误？

Answer 1

对于编译模板错误，删除/修复此标签:</<div> .此外，您必须像这样将 Prop 传递给子组件:

<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"
          }
        }
      }
    }
  }
})

<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>