老师您好,发生了下面的错误但是不知道怎么解决了,为什么说text未定义?
<template>
  <div id="app">
   <div>
     <div v-html="price"></div>
      <div :class="active">hello</div>
   </div>
  <div>
    <h3>条件渲染</h3>
    <p v-if="flag">孙悟空</p>
    <p v-else>猕猴</p>
    <template v-if="flag">
      <p>1</p>
      <p>2</p>
      <p>3</p>
    </template>
    <div v-show="flag">hello_show</div>
  </div>
  <div>
    <h3>列表渲染</h3>
    <button @click="addItemHandle">添加数据</button>
    <ul>
      <li v-for="(item,index) in result":key="index">{{ item.text }}</li>
    </ul>
  </div>
  <div> 
      <h3>事件渲染</h3>
      <p v-if="flags">新人请多多关照</p>
      <button v-on:click="clickHandle"></button>
      <ul>
        <li @click.stop="getMessageHandle(item.text,$event)" v-for="(item,index) in result":key="index">{{item.text}}</li>
      </ul>
      <a @click.prevent="clickIwenHandle" href="http://iwenwiki.com">iwen</a>
      
  </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return{
      msg:"这是一个模板语法",
      price:"<h3>300</h3>",
      active:"active",
      count: 0,
      flag:true,
      result:[
        {
          id:1001,
          text:"开放三胎"
        },
        {
          id:1002,
          text:"6.1儿童节"
        },
        {
          id:1003,
          text:"东亚文化"
        }
      ],flags:false
    }
  },
  methods:{
    clickHandle(){
     this.flags = !this.flags
    },getMessageHandle(data,e){
        console.log(data,e)
    },
    clickIwenHandle(){
        console.log(111)
    },
    addItemHandle(){
      // this.result.push({
      //   id:1004,
      //   text:"加油加油"
      // })
     this.result = this.result.concat([{id:1004,text:"加油加油"}])  //合并数组
      }
    },
  components: { 
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
