为什么我得到变量值而不是变量名的“属性或方法未定义”？

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

如果有的话，我希望会有一个错误，说“文本框”未定义。 我不明白为什么老师的评论是“未定义的”？

错误的屏幕截图

Answer 1

它说变量teacherComment不存在。 如果我们查看您的Vue实例，您会发现它仅有的是el属性，而从未定义过teacherComment 。 要修复它，您需要将其添加为数据属性。

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