>

정적 텍스트를 통과하면 작동하는 VueJS 구성 요소가 있지만 변수 값을 바인딩하려고하면 "이 인스턴스에 속성 또는 메서드가 정의되어 있지 않습니다"라는 메시지가 나타납니다. 그러나 정의되지 않은 소품이라고 말하는 대신 "정의되지 않은"소품의 변수 값입니다.

HTML:
<section class="reflectionPage" id="reflectionPage">
    <div class="header">
        <h1>Independent Learner &amp; International Citizen</h1>
        <h3>Character, Collaboration, Learning Goals</h3>
    </div>
    <reflection-box type="student" imgurl="https://placeimg.com/640/480/tech/sepia"></reflection-box>
    <reflection-box type="teacher" v-bind:textbox="teacherComment"></reflection-box>
</section>
VueJS:
// Define a new component called reflection-box
Vue.component('reflection-box', {
    props: ['type', 'imgurl', 'textbox'],
    template: '<div :class="`${type}Reflection`" class="reflection">\
    <h4 v-if="imgurl">{{ type.charAt(0).toUpperCase() + type.slice(1) }} Reflection</h4>\
    <h4 v-else>{{ type.charAt(0).toUpperCase() + type.slice(1) }} Comment</h4>\
    <div class="reflectionBox" :class="`${type}ReflectionBox`"><img v-if="imgurl" :src="imgurl" alt="Reflection Box Image"><p v-if="textbox" v-html="textbox"></p></div>\
</div>'
})
new Vue({
    el: '#reflectionPage'
})

만약 "textbox"가 정의되어 있지 않다는 오류가있을 것으로 예상됩니다. "정의되지 않은"것이 teacherComment 인 이유를 이해하지 못합니까?

오류 스크린 샷

  • 답변 # 1

    변수 teacherComment 는  존재하지 않습니다. Vue 인스턴스를 보면 el 가 유일하다는 것을 알 수 있습니다.  속성, teacherComment 가 없습니다  한정된. 문제를 해결하려면 데이터 속성으로 추가해야합니다.

    new Vue({
      el: '#reflectionPage',
      data () {
        return {
          teacherComment: 'The value you wish to give it'
        };
      }
    })
    
    

관련 자료

  • 이전 angular - Nativescript에서 AuthGuard를 사용할 때 구성 요소에서 라우팅하는 방법
  • 다음 c# - 텍스트 블록은 텍스트를 반으로 자르고 전체 텍스트를 표시하는 솔루션은 무엇입니까?