Vue 2.6.11 在 Laravel 7 上无法正常工作答案

【问题标题】：Vue 2.6.11 doesnt work correctly on Laravel 7Vue 2.6.11 在 Laravel 7 上无法正常工作
【发布时间】：2020-08-12 15:03:06
【问题描述】：

我已经开始使用 Laravel 和 Vue 创建网页。我创建了 Laravel，运行 npm install，然后运行 npm run dev。

然后我创建了一个vue组件，从blade.php中调用，一切正常，但是submit.prevent这个函数不起作用，不知道为什么。

这是我的组件

<template>
    <div>
        <form role="form" @submit.prevent="submit">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" v-model="fields.name" />
            </div>

            <button type="submit" class="btn btn-primary">Create</button>
        </form>
    </div>
</template>

<script>
    export default {
        props: [
        ],

        data() {
            return {
                fields: {},
            }
        },

        methods: {
            submit() {
                console.log('adfs');
            },
        },
    }
</script>

很简单，但是当我按下提交按钮时，页面刷新并将数据发送到同一页面。

【问题讨论】：

尝试将 '@submit.prevent' 更改为 'v-on:submit.prevent'

标签： php laravel vue.js

【解决方案1】：

Vue.js 可以处理表单提交事件。

<form role="form" @submit.prevent="submit">

这一行实际上是在阻止提交事件，然后触发它。

试试这个：

<form role="form" @submit.prevent="onSubmit">

....

    methods: {
        onSubmit() {
            console.log('adfs');
        },
    },

【讨论】：