报错 | Do not use built-in or reserved HTML elements as component id: data

快乐的高兴的学习代码中

已于 2022-03-24 22:14:59 修改

阅读量426

点赞数

文章标签： vue.js

于 2022-03-24 22:14:29 首次发布

本文链接：https://blog.csdn.net/a123pplequeen/article/details/123723160

版权

Do not use built-in or reserved HTML elements as component id: data

Property or method "info" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
   <cpn></cpn>
  </div>

  <template id="cpn">
    <div>
      <p>学习哈哈哈哈</p>
      <p>{{info}}</p>
    </div>
  </template>

  
  <script>
   const cpn={
     template:"#cpn"
   }
    new Vue({
      el:"#app",
      data:{
        message:"你好吗？你们那边天气冷吗？我们这边已经三月了，春意盎然"
      },
      components:{
         cpn,
         data(){
           return{
             info:1
           }
         }
      }
    })
  </script>
</body>
</html>

错误原因：

我把data的位置放错了，要放在const cpn={template:"cpn"}，的后面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
   <cpn></cpn>
  </div>

  <template id="cpn">
    <div>
      <p>学习哈哈哈哈</p>
      <p>{{info}}</p>
    </div>
  </template>

  
  <script>
   const cpn={
     template:"#cpn",
     data(){
           return{
             info:1
           }
         }
   }
    new Vue({
      el:"#app",
      data:{
        message:"你好吗？你们那边天气冷吗？我们这边已经三月了，春意盎然"
      },
      components:{
         cpn,
      }
    })
  </script>
</body>
</html>