azax4
只剩渣了
2019-02-17 18:06
采纳率: 100%
浏览 29.9k

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条回答 默认 最新

  • jslang
    天际的海浪 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>
    
    点赞 评论

相关推荐