我有一个按钮，单击该按钮会向表单添加一些输入：
<a @click="addNewText()" class="items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150">
<i class="far fa-2x fa-plus-square"></i>
</a>
我正在使用 Laravel 8 和 Inertia 并想验证我的表单。当我尝试验证时，表单输入未显示在 $request->input('texts'); 中 如果表格为空。如果表单输入已填写，那么它们会出现吗？
这是我的控制器代码：
public function index()
{
$texts = [];
$texts = collect(
[
['skill_level' => null, 'word_count' => null, 'title' => null, 'description' => null, 'category' => null]
]
);
//dd($texts->toJson());
//return the view
return Inertia::render('Client/OrderFormBuilder/GiantIndex', [
"allTexts" => $texts->toJson()
]);
}
public function setOrderDetails(Request $request)
{
$texts = $request->input('texts.*');
$rules = [];
$messages = [];
for ($i = 0; $i < count($texts); $i++)
{
$rules['texts[' . $i . '][skill_level]'] = 'required';
$rules['texts[' . $i . '][word_count]'] = 'required';
$rules['texts[' . $i . '][category]'] = 'required';
//$rules['texts.' . $i . '.title'] = 'required|string|min:5|max:10000';
//$rules['texts.' . $i . '.description'] = 'required|string|min:10|max:10000000';
}
for ($i = 0; $i < count($texts); $i++)
{
$messages['texts[' . $i . '][skill_level].required'] = 'Please Enter Your Desired Skill Level.';
$messages['texts[' . $i . '][word_count].required'] = 'Please Enter Your Desired Word Count.';
$messages['texts[' . $i . '][category].required'] = 'Please Enter Your Desired Category.';
/*
$messages['texts.' . $i . '.title.required'] = 'A Title Is Required For Your Text.';
$messages['texts.' . $i . '.title.string'] = 'Please Enter A Valid Title For Your Text.';
$messages['texts.' . $i . '.title.min'] = 'Please Enter A Minimum Of 5 Characters For Your Title.';
$messages['texts.' . $i . '.title.max'] = 'Please Enter A Maximum Of 10000 Characters For Your Title.';
$messages['texts.' . $i . '.description.required'] = 'A Description Is Required For Your Text.';
$messages['texts.' . $i . '.description.string'] = 'Please Enter A Valid Description For Your Text.';
$messages['texts.' . $i . '.description.min'] = 'Please Enter A Minimum Of 10 Characters For Your Description.';
$messages['texts.' . $i . '.description.max'] = 'Please Enter A Maximum Of 10000000 Characters For Your Description.';
*/
}
//dd($texts, $rules, $messages);
Validator::make($texts, $rules, $messages)->validateWithBag('updateOrderFormBuilder');
}
这是我的 Vue 表单模板代码：
<div v-for="(singleText, index) in form.texts" v-bind:key="index" class="shadow sm:rounded-md sm:overflow-hidden mt-5">
<div class="bg-white py-6 px-4 space-y-6 sm:p-6">
<div class="col-span-6 sm:col-span-4">
<div>
<label class="block font-medium text-sm text-gray-700" for="skill_level">Skill Level</label>
<input :id="'skill_level_' + index" :name="'texts[' + index + '][skill_level]'" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full" v-model="singleText.skill_level" :autocomplete="'texts[' + index + '][skill_level]'" />
<div v-if="form.error('texts[' + index + '][skill_level]')">
<p class="text-sm text-red-600">
{{ form.error('texts[' + index + '][skill_level]') }}
</p>
</div>
<label class="block font-medium text-sm text-gray-700" for="word_count">Word Count</label>
<input :id="'word_count_' + index" :name="'texts[' + index + '][word_count]'" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full" v-model="singleText.word_count" :autocomplete="'texts[' + index + '][word_count]'" />
<div v-if="form.error('texts[' + index + '][word_count]')">
<p class="text-sm text-red-600">
{{ form.error('texts[' + index + '][word_count]') }}
</p>
</div>
<label class="block font-medium text-sm text-gray-700" for="category">Category</label>
<input :id="'category_' + index" :name="'texts[' + index + '][category]'" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full" v-model="singleText.category" :autocomplete="'texts[' + index + '][category]'" />
<div v-if="form.error('texts[' + index + '][category]')">
<p class="text-sm text-red-600">
{{ form.error('texts[' + index + '][category]') }}
</p>
</div>
</div>
</div>
最后，这是我的 Vue 代码：
props: ['allTexts'],
data: function() {
return {
showingNavigationDropdown: false,
text: {
skill_level: null,
word_count: null,
title: null,
description: null,
category: null,
},
form: this.$inertia.form({
'_method': 'POST',
texts: [],
}, {
bag: 'updateOrderFormBuilder',
resetOnSuccess: false,
}),
}
},
mounted: function () {
this.form.texts = JSON.parse(this.allTexts); //this.allTexts;
console.log(this.form.texts);
},
methods: {
switchToTeam(team) {
this.$inertia.put(route('current-team.update'), {
'team_id': team.id
}, {
preserveState: false
})
},
logout() {
axios.post(route('logout').url()).then(response => {
window.location = '/';
})
},
submit() {
this.$inertia.post(route('create-new-order.set-order-details-by-form', this.form), {
preserveScroll: true
})
},
addNewText() {
if(this.form.texts.length < 20)
{
this.form.texts.push(this.text);
console.log(this.form.texts, this.text);
}
},
removeText: function(index) {
if(this.form.texts.length > 1)
{
this.form.texts.splice(index, 1);
}
}
}
为什么，当我点击提交按钮时 $request->input('texts.*'); 不行？当表单为空时它总是不显示任何内容，并且仅在填写表单时才显示输入？