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

Posted 小花皮猪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了解决控制台报错：Property or method “showInfo“ is not defined on the instance but referenced during render相关的知识，希望对你有一定的参考价值。

前言

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

源代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <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>


报错信息如下

解决问题

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

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

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <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>

再次点击按钮测试，发现已经解决问题

总结

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

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

以上是关于解决控制台报错：Property or method “showInfo“ 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.）防踩坑

SpringBoot3整合MyBatis报错：Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are required

dubbo-admin-2.5.3 运行报错： Bean property 'URIType' is not writable or has an invalid

SpringBootMyBatis-plus 报错 sqlSessionFactory sqlSessionTemplate 最新解决办法

TypeError: Cannot destructure property `compile` of 'undefined' or 'null'

vuex报错：Property or method “$store“ is not defined on the instance but referenced during render. Make