VueJs 소품이 구성 요소에 정의되어 있지 않습니다.

VueJs 소품이 구성 요소에 정의되어 있지 않습니다.

Django 어플리케이션의 프런트엔드와 VueJ를 통합하려고 합니다.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>

그러나 페이지를 로드하면 콘솔에 다음 오류가 나타납니다.

코드의 무엇이 이러한 에러를 발생시키는 원인입니까?

컴파일 템플릿 오류의 경우 다음 태그를 제거/수정하십시오.</<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>

정보가 충분히 명확하지 않나요?암호는 무엇입니까?

한편으로,v-bind오브젝트를 전달하고 싶을 때 사용합니다. {{ }}텍스트 보간용입니다.

수정:</<div>와 함께</div>vue 인스턴스에 "post" 객체가 있다고 가정하여 @Leo에서 답변한 바와 같이

이렇게 묶을 수 있습니다.

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

당신의 게시물은 다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/46249578/vuejs-props-are-undefined-in-component