Vuejs无法提交表单Ajax

Question

我想通过模态语义UI和Vuejs提交数据。但我的表单无法通过Ajax提交数据。我很难找到问题，也许有人可以帮助我。

我的观点是这样的。

<form v-on:submit.prevent="addProductCategory" class="ui form">
        <div class="content">
            <div class="description">
                <div class="field" v-bind:class="{'has-error': input.errorsAddProductCategory.name}">
                    <label for="name">Name</label>
                    <input v-model="input.addProductCategory.name" type="text" id="name" name="name">
                    <div class="help-block" v-if="input.errorsAddProductCategory.name"
                         v-text="input.errorsAddProductCategory.name[0]"></div>
                </div>
            </div>
        </div>
        <div class="actions">
            <div class="ui black deny button">
            No
            </div>
            <button type="submit" class="ui positive right button">Add</button>
        </div>
    </form>
<script type="text/javascript">
    const CSRF_TOKEN = '{{ csrf_token() }}';
    const URLS = {
        productCategory: {
            addProductCategory: '{{ route('product-category.store') }}',
        }
    };
</script>

添加数据的功能。

function addProductCategory() {
var data = app.input.addProductCategory;
data._token = CSRF_TOKEN;

$.ajax({
    url: URLS.productCategory.addProductCategory,
    method: 'POST',
    data: data,
    success: function (data) {
        app.input.addProductCategory = {
            name: ""
        };
        app.input.errorsAddProductCategory = [];

        $('#modal-create').modal('hide');
    }
    error: function (data) {
        if (data.status === 401) { // unauthorized
            window.location.reload();
        } else if (data.status === 422) {
            app.input.errorsAddProductCategory = data.responseJSON;
        } else {
            alert('There is an error.');
            console.log(data);
        }
    }
});
}

和Vuejs

var app = new Vue({
el: "#app",
data: function () {
    return {
        input: {
            addProductCategory: {
                name: ""
            },
            errorsAddProductCategory: [],
            editProductCategory: {
                name: ""
            },
            errorsEditProductCategory: []
        }
    };
},
methods: {
    addProductCategory: addProductCategory,
}
});