Laravel/Vue 表单验证

Question

我在使用 Laravel 和 Vue 时遇到了验证问题

我的控制器有这样的逻辑。

$this->validate($request, [
    "name" =>   ["required", "min:3"]
]);

然而，Vue 只识别两种验证中的一种。例如，如果文本字段的长度不是至少 3 个字符，Vue 仍然会允许所有人通过，并声称仍然需要 name 字段。

前端显示的唯一错误是“必需”规则，“min:3”没有。

有什么建议吗？或者，如果有人能引导我找到一个很好的 VueJS/Laravel 验证资源，那也很棒，

提前致谢。

另外一件奇怪的事情是，虽然 name 字段是必填的，即使它被填写了，Laravel 仍然会在控制台 422 中返回该错误。

VueJS 组件

<template>
    <!-- Third paramater in v-bind="" class will be used in either -->
    <div>
        <form v-on:submit.prevent>
            <div class="section">
                <div class="field level">
                    <p class="control has-text-centered">
                        <input
                            id="name"
                            name="name"
                            v-model="item.name"
                            class="input is-rounded is-large"
                            type="text"
                            placeholder="Enter Todo.."
                            v-bind:class="[
                                item.name ? 'is-success' : 'is-normal',
                                'plus'
                            ]"
                        />
                    </p>
                </div>
                <div class="alert alert-danger" v-if="errors && errors.name">
                    {{ errors.name[0] }}
                </div>
                <button
                    @click="addItem()"
                    class="button is-primary is-fullwidth"
                >
                    <font-awesome-icon
                        icon="plus-square"
                        class="color is-primary"
                    />
                </button>
            </div>
        </form>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            item: {
                name: ""
            },

            errors: {}
        };
    },

    methods: {
        addItem() {
            // if (this.item.name === "") {
            //     return;
            // }
            axios
                .post("api/item/store", {
                    item: this.item
                })
                .then(response => {
                    if (response.status == 201) {
                        this.item.name = "";
                        this.$emit("reloadlist");
                        this.errors = {};
                    }
                })
                .catch(error => {
                    if (error.response.status == 422) {
                        this.errors = error.response.data.errors;
                    }
                    console.log(error);
                });
        }
    }
};
</script>

<style scoped>
p {
    margin: auto;
}
</style>

PHP 控制器

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Item;
use Illuminate\Support\Carbon;

class ItemsController extends Controller
{
    /**
     * Display a listing of the item resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return Item::orderBy("created_at", "DESC")->get();
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $this->validate($request, [
            "name" =>   ["required", "min:3"]
        ]);

        $newItem = new Item;

        $newItem->name = $request->item["name"];

        $newItem->save();
        dd("Hello, World");
        return $newItem;
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $existingItem = Item::find($id);

        if ($existingItem) {
            $existingItem->completed = $request->item["completed"] ? true : false;
            $existingItem->completed_at = $request->item["completed"] ? Carbon::now() : null;

            $existingItem->save();

            return $existingItem;
        }

        return "Item not found.";
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $existingItem = Item::find($id);

        if ($existingItem) {
            $existingItem->delete();

            return "Item '{$existingItem->name}' deleted successfully.";
        }

        return "Item not found.";
    }
}

Answer 1

Item 已经是一个对象，因此您不需要将它放入对象变量中并为其命名。

将你的 axios 请求更改为：

methods: {
        addItem() {
            // if (this.item.name === "") {
            //     return;
            // }
            axios
                .post("api/item/store", this.item)
                .then(response => {
                    if (response.status == 201) {
                        this.item.name = "";
                        this.$emit("reloadlist");
                        this.errors = {};
                    }
                })
                .catch(error => {
                    if (error.response.status == 422) {
                        this.errors = error.response.data.errors;
                    }
                    console.log(error);
                });
        }
    }

我想这会解决你的问题。