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

Question

我正在使用 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));
    }


};

Answer 1

您可以使用

vue-axios

或vue-resource (not recommended 不过)

为了在 Vue 中发送请求。