Vuelidate 深层嵌套的字符串数组答案

【问题标题】：Vuelidate deep nested array of stringsVuelidate 深层嵌套的字符串数组
【发布时间】：2020-02-19 12:14:35
【问题描述】：

我的 Vue 文件中有以下结构的数据：

data() {
  return {
    formData: {
      name: 'foo',
      objects: [
        {id: 0, name: 'a', props: []},
        {id: 1, name: 'b', props: ['2', '23']},
        {id: 2, name: 'c', props: ['44']},
        {id: 3, name: 'd', props: []}
      ]
    },
    currentObj = null,
    currentPropIndex = null
  }
}

数组objects 中的对象数量是动态的，props 数组也是动态的，其中可以添加和删除字符串值。我需要使用 Vuelidate 在每个对象更改时验证每个对象中的 props 数组的每个值。所以我尝试了这个：

validations: {
  formData: {
    name: { required, maxLength: maxLength(64) },
    objects: {
      props: {
        $each: {
          required, numeric, maxLength: maxLength(5)
        }
      }
    }
  }
},

计算：

propsErrors() {
    const errors = [];
    if ( this.currentObj) {
      // const objIndex = _.findIndex(this.formData.objects, o => o.id === this.currentObj.id)
      if (!this.$v.formData.objects['props'][this.currentPropIndex].$dirty) {
        return errors;
      }
      !this.$v.formData.objects['props'][this.currentPropIndex].maxLength && errors.push('Max 5 digits')
      !this.$v.formData.objects['props'][this.currentPropIndex].required && errors.push('Required')
      !this.$v.formData.objects['props'][this.currentPropIndex].numeric && errors.push('Digits only')
    }
    return errors
  },

还有我的 Vuetify 文本字段：

<v-text-field single-line flat dense required
  v-model="object.props[index]"
  :error-messages="propsErrors"
  label="Prop"
  height="30"
  @click="setCurrents(protocol, index)"
  @blur="$v.formData.protocolPorts['manual_ports'][index].$touch()"
  @input="$v.formData.protocolPorts['manual_ports'][index].$touch()" />

而setCurrents只设置当前编辑的对象和道具索引：

setCurrents (protocol, index) {
    this.currentObj = protocol;
    this.currentPropIndex = index;
  }

测试页面并单击文本字段后，我收到此错误：Error in render: "TypeError: Cannot read property 'props' of undefined"

我试图改变propsErrors（objIndex目前在上面的代码中被注释掉了）

this.$v.formData.objects[objIndex]['props'][index].maxLength && errors.push('Max 5 digits')

文本字段（oi 代表对象索引）：

@input="$v.formData.objects[oi].props[index].$touch()"

和验证：

validations: {
  formData: {
    name: { required, maxLength: maxLength(64) },
    objects: {
      required,
      $each: {
        props: {
          $each: {
            required, numeric, maxLength: maxLength(5)
          }
        }
      }
    }
  }
},

仍然不断出错。请问有什么想法吗？

【问题讨论】：

查看您的代码，您得到的错误意味着 object.props[index] 中的对象未定义或 $v.formData.objects[oi] 未定义
@Shoejep 它在$v.formData.objects[oi]。看起来我没有正确定位某些东西，我无法弄清楚到底是什么。
你能说明object和oi是如何定义的吗？
@Shoejep 当然：<v-row v-for="(object, oi) in formData.objects" :key="object.id"></v-row>

标签： javascript validation vue.js vuelidate

【解决方案1】：

我从未使用过 Vuelidate，但我发现这个示例非常有用，并且与您尝试执行的操作相当相似 https://vuelidate.js.org/#sub-collections-validation

你在 Vue 实例中的数据应该从

currentObj = null,
currentPropIndex = null

到

currentObj: null,
currentPropIndex: null

【讨论】：

【解决方案2】：

$each 现在已被删除，请参阅https://github.com/vuelidate/vuelidate/issues/781

【讨论】：