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内发送请求。

Answer 2

Vue无法处理HTTP请求。

为每个输入添加一个form标记（在<template>之后）：

<form id="my-form" action="your-php-file.php" method="POST">

然后，使用jQuery提交表单：

$('#my-form').submit();

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

2 个答案: