Javascript 使用vuex store的Laravel验证始终响应错误422

我是Laravel Vue的新手，为CURD函数编写了一些代码，除了服务器端验证之外，一切正常。我收到422条错误消息：{“消息”：“给定的数据无效。”，“错误”：{“iso”：[“iso字段是必需的。”]}

请求有效负载： {国家：[，…]} 国家：[，…] 0:{id:2，iso:“英国”，idd:“44”，en_GB:“联合王国”，zh_HK:“英国”，zh_CN:“英国”，本地：“英国”，使用中：1，…} 1:{id:1，iso:“美国”，idd:“1”，en_GB:“美国”，zh_HK:“美国”，zh_CN:“美国”，本地:“美国”，使用中：1，…}

环境设备： 马里亚布10 PHP 7.3.19， 节点12.16.3 作曲家1.10.6 拉威尔7.6.1 宅地v10.8.1 virtualbox 6.1 Vue 2.6.11

相关代码：countryManager.vue、CountrySwitch.vue、store/index.js、Amdin/CountryController.php、Country.php

乡村经理

<template> 
    <v-container>
        <v-layout>
            <v-flex>
                <v-card class="mx-auto" >
                    <v-system-bar color="indigo darken-2" dark>
                    <v-spacer></v-spacer>
                
                    <v-icon>mdi-window-minimize</v-icon>
                
                    <v-icon>mdi-window-maximize</v-icon>
                
                    <v-icon>mdi-close</v-icon>
                    </v-system-bar>
                
                    <v-toolbar color="indigo" dark>
                        <v-app-bar-nav-icon></v-app-bar-nav-icon>
                    
                        <v-toolbar-title>Country table maintenance</v-toolbar-title>
                    
                        <v-spacer></v-spacer>
                    
                        <v-btn icon>
                            <v-icon>mdi-magnify</v-icon>
                        </v-btn>
                    </v-toolbar>
                    <v-card-text color="indigo darken-2" dark>
                        <div class="flex-table">
                        <div>ISO</div>
                            <div>English</div>
                            <div>Chinese Traditional</div>
                            <div>Chinese Simplified</div>
                            <div>Local Name</div>
                            <div>Idd Dialing Code</div>
                            <div>Remarks</div>
                            <div>
                                <v-icon @click="addCountry()">fa fa-plus-circle</v-icon>
                                <v-icon @click="trashedCountry()">fa fa-recycle</v-icon>
                            </div>
                        </div>
                        <div v-for="(country, index) in countries" :key="country.id" class="flex-table">
                            <div>
                                <div v-if="countryEditingId ==country.id">
                                    <v-text-field v-model="country.iso"></v-text-field>
                                </div>
                                <div v-else>
                                    {{country.iso}}
                                </div>
                            </div>
                            <div>
                                <div v-if="countryEditingId ==country.id">
                                    <v-text-field v-model="country.en_GB" ></v-text-field>
                                </div>
                                <div v-else>
                                    {{country.en_GB}}
                                </div>
                            </div>
                            <div>
                                <div v-if="countryEditingId ==country.id">
                                    <v-text-field v-model="country.zh_HK" ></v-text-field>
                                </div>
                                <div v-else>
                                    {{country.zh_HK}}
                                </div>
                            </div>
                            <div>
                                <div v-if="countryEditingId ==country.id">
                                    <v-text-field v-model="country.zh_CN" ></v-text-field>
                                </div>
                                <div v-else>
                                    {{country.zh_CN}}
                                </div>
                            </div>
                            <div>
                                <div v-if="countryEditingId ==country.id">
                                    <v-text-field v-model="country.local" ></v-text-field>
                                </div>
                                <div v-else>
                                    {{country.local}}
                                </div>
                            </div>
                            <div>
                                <div v-if="countryEditingId ==country.id">
                                    <v-text-field v-model="country.idd" ></v-text-field>
                                </div>
                                <div v-else>
                                    {{country.idd}}
                                </div>
                            </div>
                            <div>
                                <div v-if="countryEditingId ==country.id">
                                    <v-text-field v-model="country.remarks"></v-text-field>
                                </div>
                                <div v-else>
                                    {{country.remarks}}
                                </div>
                            </div>
                            
                            <div>
                                <div v-if="!country.deleted_at">
                                    <div v-if="countryEditingId ==country.id">
                                        <v-btn x-small @click="saveCountries(country)">Save</v-btn>
                                    </div>
                                    <div v-else>
                                        <v-btn x-small @click="setToEditing(country)">Edit</v-btn>
                                    </div>
                                </div>
                                <div  v-if="!country.deleted_at">
                                    <div v-if="countryEditingId ==country.id">
                                        <v-btn x-small @click="resetCountries()">Cancel</v-btn>
                                    </div>
                                    <div v-else>
                                        <v-btn x-small @click="removeCountries(index)">Remove</v-btn>
                                    </div>
                                </div>
                                <div v-else>
                                    <v-btn x-small @click="restoreCountries(index)">Restore</v-btn>
                                </div>
                                
                            </div>
                        </div>
                    </v-card-text>
                    <v-spacer></v-spacer>
                    <v-card-subtitle class="grey">
                        <div class="card-footer text-muted">{{ feedback }}</div>
                        <div v-if="validationErrors"class="card-footer text-muted">{{ validationErrors }}</div>
                    </v-card-subtitle>
                </v-card>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script>
    export default {
        data(){
            return {
                countryEditingId:''
            };
        },
        computed: {
            validationErrors(){
                return this.$store.state.validationErrors;
            },
            countries(){
                return this.$store.state.countries;
            },
            feedback(){
                return this.$store.state.feedback;
            }
        },
        methods: {
            resetCountries(){
                this.countryEditingId = "";
                this.$store.dispatch('resetCountries');
            },
            setToEditing(country){
                this.countryEditingId = country.id;
            },
            addCountry(){
                this.$store.commit('ADD_COUNTRIES',{
                    id:'',
                    iso:'',
                    en_GB:'',
                    zh_HK:'',
                    zh_CN:'',
                    idd:'',
                    remarks:''
                });
            },
            saveCountries(){
                this.countryEditingId='';
                this.$store.dispatch('saveCountries');
               
            },
            updateCountries($event, property, index){
                this.countryEditingId='';
                this.$store.commit('UPDATE_COUNTRIES',{
                    index,
                    property,
                    value:$event.target.value
                });
            },
        }
    }
</script>
<style lang="scss" scoped>
.flex-table {
    display: grid;
    grid-template-columns: repeat(auto-fill,12%);
    padding:5px;
    &:nth-of-type(2n) {
        background-color: #dedede;
    }
    .actions {
        * {
            padding-right: 10px;
        }
    }
}
</style>

Amdin/CountryController.php

<?php

namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use App\country;
use Illuminate\Http\Request;

class CountryController extends Controller
{
    /**
     * Update and Insert records
     *
     * @return \Illuminate\Http\Response
     */
    public function upsert(Request $request, country $countries)
    {
        $this->authorize('restore','App\Country');
        $this->validate($request, ['iso' => 'required']);
        $countries = $request->post('countries');
        foreach ($countries as $cou){
            if ($cou['id']){              
                Country::where('id', $cou['id'])->update($cou);
            }else{
               
                Country::create($cou);
            }
        }
        $countries = Country::orderBy('en_GB')->get();
        return  ['countries'=> $countries];
    }
   
}

---

问题在于您的验证规则。当你写作时

$this->validate($request, ['iso' => 'required']);

这意味着您的请求需要验证一个字段“iso”，并且在您的帖子中

 axios.post('/api/countries/upsert',{
            countries: state.countries,
 })

您只有一个“国家”属性，“iso”被视为空，因此您所需的规则总是被拒绝

如果您试图验证您的国家/地区阵列中的每个国家/地区都需要一个必需的“iso”字段，您应该在此处检查如何验证阵列
此代码仅在您将验证每个帖子中的一个国家/地区时有效：

 $this->validate($request, ['iso' => 'required']);

但您要存储n个国家/地区，因此必须验证阵列：

$this->validate($request, ['countries.*.iso' => 'required']);

 axios.post('/api/countries/upsert',{
            countries: state.countries,
 })

 $this->validate($request, ['iso' => 'required']);

$this->validate($request, ['countries.*.iso' => 'required']);