vue.js v-on:click.native 在刀片文件中未触发 laravel

Question

@extends('layouts.app')

@section('content')
<div id="home" class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <div class="card-body">

                    <button type="button" class="btn btn-primary" v-on:click.native="test">Primary</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var home = new Vue({
        el: '#home',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            test() {
                console.log('test')
            }
        }
    });
</script>
@endsection

I tried @click.prevent, something like v-on:click="$emit('click', $event)" and much more. No matter what a try, it never fires. Am I doing something wrong???

Answer 1

I found the problem!!

It was the first line, @extends('layouts.app')

I just deleted this line in my layouts.app:

<script src="{{ asset('js/app.js') }}" defer></script>

Now it works!!

Answer 2

.native modifier is for Custom Event Handling as per the docs and is useful for component elements, just remove it and the event will fire as you expect

<button type="button" class="btn btn-primary" @click="test">Primary</button>