vue.js v-on: click.native не стреляет в файл лезвия

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

Я попробовал @ click.prevent, что-то вроде v-on: click = "$ emit ('click', $ event)" и многое другое.Независимо от того, что попытка, она никогда не срабатывает.Я что-то не так делаю ???

Answer 1

Я обнаружил проблему !!

Это была первая строка, @extends ('layouts.app')

Я только что удалил эту строку в моих раскладках.app:

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

Теперь все работает !!

Answer 2

Модификатор

.native предназначен для пользовательской обработки событий согласно документам и полезен для элементов компонентов, просто удалите его, и событие сработает, как вы ожидаете

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