如何验证 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 - @open="editName = props.item.name"
3. 你检查this.editName保存在你的saveName(props.item)

如

  <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 is going to be removed in 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>

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