如何通过vuejs中的表单验证将数据恢复到数据库?

时间:2019-03-23 18:50:50

标签: laravel vue.js

我为商品付款时创建了一个促销代码表单,但是填写表单并单击“更新”后,控制台中出现错误。我的要求没有离开。 但是,当我更换控制器时:

$couponDs = ModeratorPromoCodes::where('promo_code', $request->promo_code)->first();

作者

$couponDs = ModeratorPromoCodes::where('promo_code', 'azerty03')->first();

我的控制台中有反馈,我的输出正确填写了。

错误代码是:

POST http://dev.xxxxxxxxx.local:8000/fr/studio/coupon 500 (Internal Server Error)
(anonymous) @ VM6522:1
dispatchXhrRequest @ app.js:16140
xhrAdapter @ app.js:15974
dispatchRequest @ app.js:49732
Promise.then (async)
request @ app.js:49209
Axios.(anonymous function) @ app.js:49229
wrap @ app.js:15763
updatePromoCodes @ app.js:59090
invoker @ app.js:18239
fn._withTask.fn._withTask @ app.js:18038

----
Error: Request failed with status code 500
    at createError (app.js:16165)
    at settle (app.js:49281)
    at XMLHttpRequest.handleLoad (app.js:16039)

在web.php中路由

Route::post('/coupon', 'CouponController@submit')->name('coupon.submit');

page.blade.php-输入表单

<form @submit.prevent="submit">
              {{ csrf_field() }}
              <label class="form-check-label">
                        <input v-model="promoCodesOptions" v-on:keyup.enter="updatePromoCodes" name="promo_code">
                        <button type="submit" v-on:click="updatePromoCodes">Update</button>
                        <p>Reduction code is <i><b>@{{ promoCodesOptions }}</b></i></p>
              </label>
</form>

page.blade.php-输出代码

<li class="list-group-item d-flex justify-content-between align-items-center">
              @{{ reduction }}
              <span class="badge badge-primary badge-pill">- @{{ output }} €</span>
</li>

CouponController

    namespace App\Http\Controllers;

    use App\Coupon;
    use Illuminate\Http\Request;
    use App\Http\Controllers\Controller;
    use Illuminate\Support\Facades\Auth;
    use App\Models\ModeratorPromoCodes;

    class CouponController extends Controller
    {
        /**
         * Store a newly created resource in storage.
         *
         * @param  \Illuminate\Http\Request  $request
         * @return \Illuminate\Http\Response
         */
        public function submit(Request $request)
        {   
            //$data = $request->all();

            $couponDs = ModeratorPromoCodes::where('promo_code', $request->promo_code)->first();

            //$couponDs = ModeratorPromoCodes::findOrFail(request('product'));

            return response()->json([
                'code' => $couponDs->promo_code,
                'discount' => $couponDs->discount(100)
            ]);
        }
    }

VueJS代码部分

    ...
    data () {
           return {
                pricingModal: {
                    display: false,
                    prices: [],
                    total: 0
                },
                paymentModal: {
                    display: true,
                    records: false,
                    prices: [],
                    extras: null,
                    promoCodesData: null,
                    hourly_rate_activated: false,
                    hourly_rate: null,
                    fees: null,
                    total: 0,
                    service_rates: []
                },
                paymentOptions: null,
                promoCodesOptions: null,
                couponDatas: [],
                output: '',
                reduction: ''
            }     
    },

    methods: {
            updatePromoCodes: function (value) {
                event.preventDefault();
                let currentObj = this;
                axios.post(route('studio.coupon.submit')).then(response => {
                    let data = response.data;
                    console.log(data);
                    //currentObj.output = 'response.data';
                    currentObj.reduction = 'Reduction';
                    currentObj.output = data.discount;
                    this.paymentModal.total = this.paymentModal.total + data.discount;
                }).catch(error => {
                    console.log(error);
                });


                this.paymentModal.promoCodesData =  null;
                this.paymentModal.promoCodesData = value;

                this.paymentModal.total = this.paymentModal.total + data.discount;
            },
    }

1 个答案:

答案 0 :(得分:0)

最可能的罪魁祸首是您要搜索的促销代码不存在。在这种情况下,$couponDsnull。然后,您尝试在非对象上访问promo_code和方法discount。相反,请检查您是否确实找到了促销代码,并采取相应的措施。

我通常使用$request->get('promo_code')。我不是100%地确定$request->promo_code会按您的预期工作,但是由于Laravel在处理魔术吸气器和设定器方面工作很多,因此它确实返回了您期望的结果也就不足为奇了。您可以转储该变量以查看其返回值。


编辑:发表评论后,我注意到您正在呼叫axios.post(..)而没有发送任何数据。您只需用路线来称呼它即可。相反,您希望在该方法的第二个参数中传递数据:

axios.post(
  route('studio.coupon.submit'),
  {
    promo_code: this.promoCodesOptions
  }
).then(...)

您可能会遇到Laravel无法解析您发送的数据的问题。确保在配置中发送正确的Content-Type标头作为第三个参数。有关所有请求配置选项,请参见the documentation