如何验证v-datatable中的v-edit-dialog

Question

我是vue.js和vuetify的新手，目前正在尝试验证v-datatable内的v-edit-dialog中的输入。验证似乎有效，但保存按钮不会被禁用，用户输入即使无效也会被保存。有没有办法让按钮被禁用或防止保存无效数据？

我的数据表：

<v-data-table dense :headers="headers" :items="sitesTable">
<template v-slot:top>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<v-card>
<v-toolbar flat>
<v-toolbar-title v-model="title" class="primary--text">{{ title }} Site</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon @click="close">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-toolbar>
<v-card-text>
<v-container>
<FormTemplateSites v-bind:title="title" @dialog="!dialog"></FormTemplateSites>
</v-container>
</v-card-text>
</v-card>
</v-dialog>
</template>
<template v-slot:item.name="props">
<v-edit-dialog :return-value.sync="props.item.name" large persistent @save="saveName(props.item.name, props.item)">
<div>{{ props.item.name }}</div>
<template v-slot:input>
<div class="mt-4 title">Update Name</div>
</template>
<template v-slot:input>
<v-text-field v-model="props.item.name" :rules="required" label="Edit" single-line counter autofocus></v-text-field>
</template>
</v-edit-dialog>
</template>
<template v-slot:item.field="props">
<v-edit-dialog :return-value.sync="props.item.field" large persistent @save="saveField(props.item.field, props.item)">
<div>{{ props.item.field }}</div>
<template v-slot:input>
<div class="mt-4 title">Update Field</div>
</template>
<template v-slot:input>
<v-text-field v-model="props.item.field" :rules="rules_vectors" label="Edit" single-line counter autofocus></v-text-field>
</template>
</v-edit-dialog>
</template>
<template v-slot:item.position="props">
<v-edit-dialog :return-value.sync="props.item.position" large persistent @save="savePosition(props.item.position.x, props.item.position.y, props.item)">
<div>{{ props.item.position }}</div>
<template v-slot:input>
<div class="mt-4 title">Update Position</div>
</template>
<template v-slot:input>
<v-text-field v-model="props.item.position" label="Edit" single-line autofocus :rules="rules_vectors"></v-text-field>
</template>
</v-edit-dialog>
</template>
<template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" @click="editSite(item)">mdi-pencil</v-icon>
<v-icon small @click="deleteItem(item)">mdi-delete</v-icon>
</template>
</v-data-table>

我的组件：

data: () => ({
title: '',
dialog: false,
required: [(v) => !!v || 'Required', ],
rules_vectors: [
(v) => !!v || 'Required',
(v) => {
try {
v = JSON.parse(v)
for (let item of v) {
if (!isNaN(item)) {
console.log(item)
} else {
return 'Invalid vector.'
}
}
return v.length === 2 || 'Invalid vector.'
} catch (error) {
console.log(error)
return 'Invalid vector.'
}
},
],
pagination: {},
headers: [{
text: 'Name',
align: 'start',
sortable: false,
value: 'name',
},
{
text: 'ID',
align: 'start',
sortable: false,
value: 'id',
},
{
text: 'Position',
sortable: false,
value: 'position',
},
{
text: 'Field',
sortable: false,
value: 'field',
},
{
text: 'Actions',
value: 'actions',
sortable: false,
},
],
}),

Answer 1

我也有同样的问题

有没有办法让按钮被禁用或防止保存无效数据？

我找到了一种方法来解除从编辑的值传递的项值和"；"防止保存无效数据"；。

通过使用一个单独的数据字段editName并将v-text-field链接到该字段，您可以在open上设置值，并在save上进行检查和设置，而不会使项目值受到无效值的污染。

所以

1. v-text-field的v-model是v-model="editName"
2. v-edit-dialog具有设置编辑值-@open="editName = props.item.name"的@open
3. 在保存saveName(props.item)时检查this.editName

如

<v-data-table dense :headers="headers" :items="sitesTable">    
<template v-slot:item.name="props">
<v-edit-dialog           
large 
persistent 
@save="saveName(props.item)"
@open="editName = props.item.name"
>
<div>{{ props.item.name }}</div>
<template v-slot:input>
<div class="mt-4 title">Update Name</div>
</template>
<template v-slot:input>
<v-text-field 
v-model="editName" 
:rules="required" 
label="Edit" 
single-line 
counter 
autofocus
></v-text-field>
</template>
</v-edit-dialog>
</template>
</v-data-table>

保存

saveName(item) {
if (this.validate(this.editName) {
item.name = this.editName

...
}
}

编辑。我删除了v-data-table上的:return-value.sync="props.item.name"属性，因为它似乎凌驾于saveName()函数中item.name的设置之上

Answer 2

我遇到了同样的事情，经过一些搜索，结果发现v-edit-dialog将在v3中删除。。。这对我们现在没有帮助，但我确实想出了一个灵活的解决方案，可能也对你有用。

<v-form v-model="isFormValid">
<v-data-table
:headers="headers"
:items="items"
item-key="ID"
>
<template v-slot:item.column="{ item }">
<v-text-field
v-model="itemData"
:rules="[validationRulesHere]"
required
></v-text-field>
</template>
</v-data-table>
<v-btn :disabled="!isFormValid">Save</v-btn>
</v-form>

我把整张桌子包装成一个表格，并用它来全面地告诉我表格中的所有内容是否正确。