Question

我想将Vuelidate验证添加到Vuetify数据表中的可编辑字段。但是，我不知道如何使它与props.item参数一起使用。

对于普通的输入字段，我会做类似的事情

git cmp

我不知道如何使props.item.squareFootage起作用。我不确定如何处理索引。这是我的数据表。任何建议，将不胜感激。

:error-messages="qtyErrors"
@input="$v.quantity.$touch()"
@blur="$v.quantity.$touch()"
.
.
validations: {
  quantity: { required, numeric }
}

Answer 1

您不想为数据表中的每一行呈现一个对话框。在页面上呈现一个对话框，并在数据属性中跟踪用户正在编辑的行。在以下代码段中，此属性称为“ currentItem”。然后，您可以将验证仅绑定到该对象中的属性，而不必为表中的每一行创建验证。如果您不想使用v对话，也可以使用v-menu positioned absolutely without an external activator。

for i in {1..100000}; do dd if=/dev/urandom bs=4096 count=1 of=file$i; done

const {
  required,
  maxLength,
  email
} = validators
const validationMixin = vuelidate.validationMixin

Vue.use(vuelidate.default)

new Vue({
  el: '#app',
  data() {
    return {
      editDialog: false,
      currentItem: {},
      headers: [{
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name'
        },
        {
          text: 'Calories',
          value: 'calories'
        },
        {
          text: 'Fat (g)',
          value: 'fat'
        }
      ],
      desserts: [{
          id: 1,
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0
        },
        {
          id: 2,
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0
        }
      ]
    }
  },
  validations: {
    currentItem: {
      fat: {
        required
      }
    }
  },
  methods: {
    openEditDialog(item) {
      this.currentItem = Object.assign({}, item)
      this.editDialog = true
    },
    validate() {
      this.$v.currentItem.fat.$touch()
      if (!this.$v.currentItem.fat.$error) this.editDialog = false
    }
  }
})

Answer 2

veelidate库通过$ iter关键字支持Collection。您只需要在$ iter关键字下声明项目的数据结构，而vuelidate将为每个项目构建验证对象。例如，您可以在此处https://vuelidate.js.org/#sub-collections-validation进行检查。

但是，问题出在访问v-data-table的行模板中的这些验证对象时。由于生成的验证对象只能由迭代器访问，因此不是列表，因此行模板中的代码需要一种访问这些验证对象的方法。在这里，我工作了两个帮助器函数：用于访问验证对象的getV（）和用于验证对象的getVModel（）的数据模型。

getIter () {
  return Object.values(this.$v.items.$each.$iter)
},
getV (item) {
  if (!item.vLink) item.vLink = this.getIter().filter(i => i.$model.Id === item.Id)[0]
  return item.vLink
},
getVModel (item) {
  return this.getV(item).$model
},

然后在vue的模板中，行模板的：class可以使用getV（）访问$ invalid或$ dirty，而行模板的v-model可以使用getVModel（）访问数据。

这里是示例：

v-data-table(:headers="headers" :items="items" item-key="Id")
  template(v-slot:body="{ items }")
    tbody
      tr(v-for="item in items" :key="item.Id" :class="{ vmodified: !getV(item).$invalid && getV(item).$dirty, verror: getV(item).$invalid }")
        td
          input.table-input(type='text' v-model="getVModel(item).Vendor" @input="onChangeItem(getV(item))")
        td
          input.table-input(type='text' v-model="getVModel(item).Material" @input="onChangeItem(getV(item))")

如何将Vuelidate与可编辑的Vuetify数据表字段一起使用

2 个答案: