我尝试使用来自 Vuelidate 的集合验证。(我正在使用 Vue 3)。所以,我现在这样做的方式是呈现输入字段,但我在这里缺少的是验证,它不起作用。我的 v$ 对象中应该有 $each 数组,但我没有,也不知道为什么,我按照文档 [https://vuelidate.js.org/#sub-collections-validation] 所做的一切。有什么帮助???我希望前两个输入是必需的。
这就是我的代码的样子:
<form @submit.prevent="onSubmit">
<div class="form-items">
<div
class="form-group"
v-for="(property, index) in v$.properties.$model"
:key="index"
>
<label :for="property.name">{{ property.label }}</label>
<input
:type="property.type"
class="form-control"
:id="property.name"
v-model="property.value"
/>
</div>
<pre>{{ v$ }}</pre>
</div>
<Button
type="submit"
variant="primary"
text="Add property"
:onClick="onSubmit"
/>
</form>
</template>
<script>
import useVuelidate from "@vuelidate/core";
import { required } from "@vuelidate/validators";
import Button from "../components/Button";
export default {
name: "PropertyForm",
components: {
Button,
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
properties: [
{
name: "title",
label: "Title",
value: "",
type: "text",
},
{
name: "regular_price",
label: "Regular price",
value: "",
type: "number",
},
{
name: "sales_price",
label: "Sales price",
value: "",
type: "number",
},
{ name: "zip", label: "Zip", value: "", type: "text" },
{
name: "neighborhood",
label: "Neighborhood",
value: "",
type: "text",
},
{
name: "city",
label: "City",
value: "",
type: "text",
},
{ name: "status", label: "Status", value: "", type: "number" },
],
};
},
validations: {
properties: {
required,
$each: {
name: {
required,
},
},
},
},
};
</script>```