只剩渣了 2019-02-17 18:06 采纳率: 100%
浏览 34120
已结题

Vue点击事件无效：Invalid handler for event "click": got undefined

描述：

定义了单击事件，但是使用Vue组件生成的标签就检测不到单击的方法，并报错：Invalid handler for event "click": got undefined

把标签放到外面可以正常使用，使用Vue组件生成后就报错，而且msg这个也找不到了

请问该如何处理？以下是全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="container">
        <div id="navbar_left">
            <pr></pr>
        </div>
    </div>

    <script>
    Vue.component("pr",{
                name:"pr",
                template:"<p @click='this.toggle'>{{msg}}</p>",
                data(){
                    return{
                        open:true
                    }
                }
            });
    var app = new Vue({
            el:"#navbar_left",

            data:{
                msg:"hello world",                
            },

        methods:{
                toggle(){
                    this.open = !this.open
                }
            },
        });
    </script>
</body>
</html>
  • 写回答

1条回答

  • 天际的海浪 2019-02-17 19:34
    关注
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="container">
        <div id="navbar_left">
            <pr :msg="msg"></pr>
        </div>
    </div>

    <script>
    Vue.component("pr",{
            name:"pr",
            template:"<p @click='this.toggle'>{{msg}}</p>",
            props: ["msg"],
            data(){
                return{
                    open:true
                }
            },
            methods:{
                toggle(){
                    this.open = !this.open;
                }
            }
        });
    var app = new Vue({
            el:"#navbar_left",
            data:{
                msg:"hello world",
            }
        });
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 7月27日

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？