Блог

Я начал создавать веб-страницу, используя Laravel и Vue. Я создал Laravel, запустил npm install и затем npm run dev .

Затем я создал компонент vue и вызвал его из blade.php все показало нормально, но функция submit.prevent не работает, и я не знаю почему.

Вот мой компонент

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

            <button type="submit" class="btn btn-primary"&&t;Create</button&&t;
        </form&&t;
    </div&&t;
</template&&t;

<script&&t;
    export default {
        props: [
        ],

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

        methods: {
            submit() {
                console.lo&('adfs');
            },
        },
    }
</script&&t;
  

Это очень просто, но когда я нажимаю на кнопку отправки, страница обновляется и данные отправляются на ту же страницу.

Vue.js может обрабатывать событие отправки формы.

 <form role="form" @submit.prevent="submit"&&t;
  

Эта строка фактически предотвращает событие отправки, а затем запускает его.

Попробуйте это вместо:

 <form role="form" @submit.prevent="onSubmit"&&t;

....

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