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

我是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>

---

我遇到了同样的事情，经过一番搜索，结果是。。。这对我们现在没有帮助，但我确实想出了一个灵活的解决方案，可能也适用于你

<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>

拯救

---

我把整张桌子包装成一个表格，用它来告诉我桌子上的所有东西是否都是正确的。

我也有同样的问题

是否有办法禁用按钮或防止保存无效数据

我找到了一种方法，可以将从编辑值传递的项值解耦，并“防止保存无效数据”

通过使用单独的数据字段

editName

并将

v-text-field

链接到此字段，您可以在

open

上设置值，并在

save

上进行检查和设置，而不会使项目值被无效值污染

所以

v-text-field的
v-model
是
v-model=“editName”

v-edit-dialog

具有设置编辑值的

@open

，

@open=“editName=props.item.name”

在

saveName（props.item）

如

编辑。我删除了

v-data-table

上的

：return value.sync=“props.item.name”

属性，因为它似乎覆盖了

item.name

在

saveName（）

函数中的设置，在，因此，当使用

大布局来公开它们时，没有禁用-悲伤的长号-~~~~~对于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>

  <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
   
    ...
  }
}