2
votes

home.blade.php

<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="/css/app.css">

</head>
<body>
<div id="app">
    <form-ajax></form-ajax>
</div>

<script src="/js/app.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#form').on('submit', function(e){
            e.preventDefault();
            let name = $('#name').val();
            let pic = $('#pic')[0].files[0];
            let _token = $('input[name="_token"]').val();
            let formData = new FormData();
            formData.append('name' ,name);
            formData.append('pic' ,pic);

            $.ajax({
                method: 'POST',
                url: '/getData',
                data : formData,
                contentType : false,
                processData : false,
                headers : {
                    'X-CSRF-TOKEN' : _token
                }
            }).done(function (msg){
                console.log(msg);
            })
        })
    })
</script>
</body>
</html>

FormAjax.vue

<template>
    <div class="container">
        <form @submit.prevent="onSubmit" class="form-horizontal">
            <div class="form-group">
                <label class="control-label" v-model="name">Name
                    <input type="text" class="form-control" name="name" placeholder="Name">
                </label>
            </div>
            <div class="form-group">
                <label class="control-label">Pic
                    <input type="file" class="form-control" @change="onFileChange($event)" placeholder="Picture">
                </label>
            </div>

            <button class="btn btn-danger" type="submit">Send</button>

        </form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name : '',
                pic: null
            }
        },
        method: {
            onFileChange(event){
                this.pic = event.target.files[0];
            },
            onSubmit() {
                console.log(this.name, this.pic);

            }
        }
    }
</script>

When I send data to blade page it is not working.

[Vue warn]: Property or method "onFileChange" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Error

1
Its methods not method.Bert

1 Answers

5
votes

It should be methods instead of method