Почему я получаю «Свойство или Метод не определен» для значения переменной вместо имени переменной?

Question

У меня есть компонент 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'
})

В любом случае, я ожидаю, что будет ошибка, говорящая, что «текстовое поле» не определено,Я не понимаю, почему учительComment является "неопределенным"?

Снимок экрана ошибки

Answer 1

Это говорит о том, что переменная teacherComment не существует.Если мы посмотрим на ваш экземпляр Vue, вы увидите, что единственное, что у него есть, это атрибут el, никогда не определяется teacherComment.Чтобы исправить это, вам нужно добавить его в качестве атрибута данных.

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