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

我有同样的问题

Is there a way to let the button be disabled or to prevent the saving of invalid data?

我找到了一种方法来分离从编辑值传递的项目值并“防止保存无效数据”。
通过使用单独的数据字段 editName并链接 v-text-field为此，您可以在 open 上设置值并检查并将其设置为 save ，而项目值不会被无效值污染。
所以

v-model对于v-text-field是 v-model="editName"

v-edit-dialog有 @open设置编辑值 - @open="editName = props.item.name"

你检查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
   
    ...
  }
}

编辑。我删除了 :return-value.sync="props.item.name" v-data-table 上的属性因为它似乎覆盖了 item.name 的设置在 saveName()功能