VueJS 道具在组件中未定义

Posted 2023-02-23

【中文标题】VueJS 道具在组件中未定义

【英文标题】：VueJS props are undefined in component

【发布时间】：2018-02-25 05:40:56

【问题描述】：

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

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

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

【问题讨论】：

尝试 其中 :post 是属性，“post”匹配传递给组件的数据。

这不起作用，而且还会导致我得到一个额外的错误。

无论附加错误是什么，它肯定需要是:post="post" 而不是:post=" post "

，访问post.by.profile，需要检查post.by是否存在不是。

@thanksd 必须是 post ，因为我将 Django 模板变量作为属性传入。或者至少我是这么认为的。

【参考方案1】：

对于编译模板错误删除/修复此标签：</<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"
          
        
      
    
  
)

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

【参考方案2】：

信息还不够清楚吗？您的代码中的 </<div> 是什么？

另一方面，如果要传递对象，请使用v-bind。 用于文本插值。

【参考方案3】：

如@Leo 的回答中所述，用</div> 更正</<div> 假设你的 vue 实例中有一个对象“post”

你可以像这样绑定它

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

您的帖子必须类似于

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