Question

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>

当我向刀片页面发送数据时，它无法正常工作。

[Vue警告]：未定义属性或方法“onFileChange” 实例，但在渲染期间引用。确保此属性是无论是在数据选项中，还是在基于类的组件中，都是反应性的初始化财产。看到： https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties

Error

Answer 1

应该是methods而不是method

属性或方法“onFileChange”未在实例上定义，但在呈现期间引用

1 个答案: