如何在vue.js中从vue表单发布到php文件

如何在vue.js中从vue表单发布到php文件,php,vue.js,Php,Vue.js,我正在使用vue.js和php/我有这个vue表单,我希望将所选元素发布到php文件中。我该怎么做呢。我需要php页面中选定的元素作为post变量。请帮忙。完成任务的可能选项有哪些 <template> <div class="row"> <div class="col-lg-offset-3 col-md-offset-2 col-sm-offset-2 col-lg-6 col-md-8 col-sm-8">

我正在使用vue.js和php/我有这个vue表单,我希望将所选元素发布到php文件中。我该怎么做呢。我需要php页面中选定的元素作为post变量。请帮忙。完成任务的可能选项有哪些

<template>
    <div class="row">
        <div class="col-lg-offset-3 col-md-offset-2 col-sm-offset-2 col-lg-6 col-md-8 col-sm-8">
            <div class="form-group">
                <h3><i class="fa fa-file-excel-o"></i>&nbsp;Fixed Asset Report2</h3>
            </div>

            <divider></divider>

            <!-- category / status -->
            <div class="form-group">
                <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <label class="control-label">Category</label>
                        <select
                                class="form-control input-lg"
                                v-model="query.category"
                                placeholder="Select Category">
                            <option value="">-- Report All Category --</option>
                            <option
                                    v-for="category in categoryList"
                                    track-by="$index"
                                    :value="category"
                                    v-text="category"></option>
                        </select>
                    </div>

                    <div class="col-lg-6 col-md-6">
                        <label class="control-label">Status</label>
                        <select
                                class="form-control input-lg"
                                v-model="query.status"
                                placeholder="Select Status">
                            <option value="">-- Report All Status --</option>
                            <option
                                    v-for="status in statusList"
                                    track-by="$index"
                                    :value="status"
                                    v-text="status"></option>
                        </select>
                    </div>
                </div>
            </div>
            <!-- ./ category / status -->

            <divider></divider>

            <div class="form-group">
                <checkbox
                        :model.sync="query.date"
                        true-message="List Within Specified Range (Acquisition Date)"
                        false-message="List Within Specified Range (Acquisition Date)"></checkbox>
            </div>

            <!-- start / end -->
            <div
                    class="form-group"
                    v-show="query.date === true"
                    transition="fade">
                <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <label class="control-label">Start <code>DD-MM-YYYY</code>*</label>
                        <date-time
                                format="YYYY-MM-DD"
                                display-format="DD-MM-YYYY"
                                class="form-control input-lg"
                                :required="true"
                                :model.sync="query.start"></date-time>

                        <small
                                class="help-block"
                                v-show="query.start.length < 1"><code>Start</code> is required</small>
                    </div>

                    <div class="col-lg-6 col-md-6">
                        <label class="control-label">End <code>DD-MM-YYYY</code>*</label>
                        <date-time
                                format="YYYY-MM-DD"
                                display-format="DD-MM-YYYY"
                                class="form-control input-lg"
                                :required="true"
                                :model.sync="query.end"></date-time>

                        <small
                                class="help-block"
                                v-show="query.end.length < 1"><code>End</code> is required</small>
                    </div>
                </div>
            </div>
            <!-- ./ start / end -->

            <divider></divider>

            <div class="form-group">
                <label class="control-label">Select Columns to export to CSV</label>

                <!-- filter -->
                <div class="row">
                    <!-- toggle -->
                    <div class="col-lg-12">
                        <checkbox
                                :model.sync="all"
                                true-message="Select All"
                                false-message="Select None"></checkbox>
                    </div>
                    <!-- ./ toggle -->

                    <!-- filters -->
                    <div class="col-lg-6" v-for="(k, f) in filter" track-by="$index">
                        <checkbox
                                :model.sync="filter[k].show"
                                :true-message="f.label"
                                :false-message="f.label"></checkbox>
                    </div>
                    <!-- ./ filters -->
                </div>
                <!-- ./ filter -->
            </div>

            <divider></divider>

            <div class="form-group text-center">
                <button
                        type="button"
                        class="btn btn-lg btn-success-outline"
                        @click="generate">&nbsp;&nbsp;&nbsp;<i class="fa fa-file-excel-o"></i>&nbsp;&nbsp;Download Report&nbsp;&nbsp;&nbsp;</button>
            </div>
        </div>
    </div>
</template>
PHP文件

<?php
$__REST__['REPORT_FOR_FIXED_ASSET'] = function($routeInfo) {
    if ($_POST){

        die(print_r($_POST));
    }


};

Vue无法处理HTTP请求

在每个输入周围添加一个
表单
标记(紧跟在
之后):

你可以用

或者(尽管如此)

以便在Vue内发送请求

<form id="my-form" action="your-php-file.php" method="POST">
$('#my-form').submit();