如何验证 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

我遇到了同样的事情，经过一些搜索，结果发现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>

我将整个表格包装在一个表格中，并用它来总体告诉我表格中的所有内容是否正确。