[Vue.js] 當有傳遞參數時,想獲取$event,必須在v-on事件監聽時也一併傳入$event

by ShadowKao

HTML

<!doctype html>
<html>
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <title>Hello, Vue.js!</title>
    <style type="text/css">
        body {
            padding-top: 30px;
        }  
    </style>
</head>
<body> 
    <div class="container" id="myApp">
        <div class="row">
            <div class="form-group col-12">
                <button type="button" class="btn btn-primary" value="doThis1" v-on:click="doThis1">事件不傳參數</button>
                <button type="button" class="btn btn-primary"  value="doThis2" v-on:click="doThis2($event)">事件只傳$event</button>
                <button type="button" class="btn btn-info"  value="doThis3" v-on:click="doThis3('Hello Vue.js!!',$event)">事件傳遞參數和$event</button>
                <button type="button" class="btn btn-info"  value="doThis4" v-on:click="doThis4('Hello Vue.js 2!!')">事件只傳遞參數</button>
            </div> <!-- end .form-group-->
            <div class="form-group col-12">
               觸發事件target.value: {{showData}}
            </div>
            <div class="form-group col-12">
                訊息: {{msg}}
            </div>
        </div> <!--end .row-->
        </div> <!--end .container-->


    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"...