如何解决如何在Vuetify中的每个动态输入字段上匹配验证？
我想让用户填写第一个输入，然后单击“下一步”再次填充以确认是否可以提交值匹配项，但如果值不匹配，请使用规则验证每个动态输入字段。
问题是，在动态输入字段中，仅检查第一组输入字段，但是，如果我添加更多输入字段，则不检查其值，我想使用规则检查每个动态中不匹配的输入集输入字段，有人可以帮我做个例子吗？
这是我的代码
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" />
</head>
<body>
<div id="app">
<v-app>
<v-container>
<v-form ref="form" v-model="valid" @submit.prevent="submitForm" autocomplete="off">
<v-card>
<v-card-text>
<v-row>
<div v-for="(text,index) in form.data" :key="index">
<v-row>
<v-col cols="5">
<v-select :items="option" item-text="text001" item-value="value"
v-model="text.fname" filled label="text001" :rules="[rules.required]">
</v-select>
</v-col>
<v-col cols="2">
<v-btn @click="deleteInput(index)" class="mx-2" fab x-small dark
color="error">
<v-icon dark>mdi-minus</v-icon>
</v-btn>
</v-col>
</v-row>
</div>
<v-col cols="12">
<v-btn @click="addInput" class="mx-2" fab small dark color="warning">
<v-icon dark>mdi-plus</v-icon>
</v-btn>
</v-col>
</v-row>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<template>
<v-dialog v-model="dialog" persistent fullscreen>
<template v-slot:activator="{ on,attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">
Next
</v-btn>
</template>
<v-card>
<v-card-text>
<v-row>
<div v-for="(text,index) in form.data2" :key="index">
<v-row>
<v-col cols="5">
<v-select :items="option" item-text="text001"
item-value="value" v-model="text.refname" filled
label="text001"
:rules="[rules.required,ConfirmationFname]"></v-select>
</v-col>
<v-col cols="2">
<v-btn @click="deleteInput(index)" class="mx-2" fab x-small
dark color="error">
<v-icon dark>mdi-minus</v-icon>
</v-btn>
</v-col>
</v-row>
</div>
<v-col cols="12">
<v-btn @click="addInput" class="mx-2" fab small dark
color="warning">
<v-icon dark>mdi-plus</v-icon>
</v-btn>
</v-col>
</v-row>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" text @click="dialog = false">Disagree</v-btn>
<v-btn :disabled="!valid" color="success" class="mr-4" type="submit"
@click="submitForm">
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
</v-card-actions>
</v-card>
</v-form>
</v-container>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</body>
<script>
new Vue({
el: '#app',vuetify: new Vuetify(),data() {
return {
valid: false,dialog: false,rules: {
required: (value) => !!value || "Required.",},form: {
data: [{ fname: "",qty: "" }],data2: [{ refname: "",reqty: "" }],option: [
{ text001: "text1",value: "1" },{ text001: "text2",value: "2" },],};
},computed: {
ConfirmationFname() {
return (
this.form.data[0].fname === this.form.data2[0].refname ||
"value must match"
);
},methods: {
submitForm() {
this.$refs.form.validate();
},addInput() {
this.form.data.push({ fname: "",qty: "" });
this.form.data2.push({ refname: "",reqty: "" });
},deleteInput(index) {
this.form.data.splice(index,1);
this.form.data2.splice(index,1);
},})
</script>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。