解决控制台报错：Property or method “showInfo“ is not defined on the instance but referenced during render

快来打我* 2023-09-26 10:34 107阅读 0赞

## 前言 ##

今天写一个vue的单击事件，发现报错了

源代码如下

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    
    <body>
        <div id="root">
            <h2>欢迎学习：{
        {
        name}}</h2>
            <button v-on:click="showInfo">点我提示信息</button>
        </div>
        
        <script type="text/javascript">
          function showInfo(){
        
            alert("你好！")
          }
          Vue.config.productionTip = false
            const vm=new Vue({
        
                el:'#root',
                data:{
        
                    name:'vue'
                }
            }) 
        </script>
    </body>
    
    </html>

![在这里插入图片描述][e701c1d62bc94c4c9e08add78329fe70.png]  
报错信息如下  
![在这里插入图片描述][59b5a6550016466789acd573f2b8f8f1.png]

## 解决问题 ##

分析问题发现，是由于我的单击回调函数写的不对，我是用的js方式写的这个函数，但是在vue中读取不到这个函数，所以才会报错！

需要使用vue的一个属性：methods  
把回调函数写在里面，才能读取到函数，传统js写法是不行的！

我们修改代码，把函数放到methods里面，需要去掉function,只需要保留函数名称以及基本格式

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    
    <body>
        <div id="root">
            <h2>欢迎学习：{
        {
        name}}</h2>
            <button v-on:click="showInfo">点我提示信息</button>
        </div>
        
        <script type="text/javascript">
          function showInfo(){
        
            alert("你好！")
          }
          Vue.config.productionTip = false
            const vm=new Vue({
        
                el:'#root',
                data:{
        
                    name:'vue'
                },
                methods:{
        
                     showInfo(){
        
                     alert("你好！")
                    }
                }
            }) 
        </script>
    </body>
    
    </html>

![在这里插入图片描述][2f238c6cef9a4db78512a1bd1f1802f3.png]

再次点击按钮测试，发现已经解决问题  
![在这里插入图片描述][889f6087f88c41978a1b1837f7ee1797.png]

## 总结 ##

在编写vue代码时，我们需要遵循vue的写法，不能一位的使用js代码去实现vue的功能

其他回调函数也是一样的写法，都要写在vue的属性methods里面,让vue可以读取到这个回调函数

[e701c1d62bc94c4c9e08add78329fe70.png]: https://img-blog.csdnimg.cn/e701c1d62bc94c4c9e08add78329fe70.png
[59b5a6550016466789acd573f2b8f8f1.png]: https://img-blog.csdnimg.cn/59b5a6550016466789acd573f2b8f8f1.png
[2f238c6cef9a4db78512a1bd1f1802f3.png]: https://img-blog.csdnimg.cn/2f238c6cef9a4db78512a1bd1f1802f3.png
[889f6087f88c41978a1b1837f7ee1797.png]: https://img-blog.csdnimg.cn/889f6087f88c41978a1b1837f7ee1797.png

解决控制台报错：Property or method “showInfo“ is not defined on the instance but referenced during render

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关报错：Property or method “xxx“ is not defined on the instance but referenced during render.

相关详细解决Vue的警告：Property or method “xxx“ is not defined on the instance but referenced during render

相关解决控制台报错：Property or method “showInfo“ is not defined on the instance but referenced during render

相关记一次vue使用template循环报错 Property or method “item“ is not defined on the instance

相关 uni - app - Property or method “toJSON“ is not defined on the instance but referenced during render.

相关 Vue错误——Property or method "toJSON" is not defined on the instance but referenced during render.

相关 VUE 解决：Property or method “deleteFun“ is not defined on the instance but referenced during render.

相关 Vue抛 Property or method "turn" is not defined on the instance but referenced during render. 的解决方法

相关 vue2-preview缩略图插件 Property or method "$preview" is not defined on the instance but referenced

相关 [Vue warn]: Property or method “search“ is not defined on the instance but referenced......