如何将 vuelidate 与对象数组一起使用？答案

【问题标题】：How do I use vuelidate with an array of objects?如何将 vuelidate 与对象数组一起使用？
【发布时间】：2020-09-24 19:00:30
【问题描述】：

我有一组对象，我在表单调查问卷中循环遍历这些对象。每个对象中有五个属性，但只有一个属性需要验证。我将组件的验证部分设置如下：

specificGifts: {
      $each: {
        passThrough: {
          required: requiredIf(function(value) {
            return this.docs.includes('Will')
          })
        }
      }
    },

我在我的表单 html 中的 vuelidate 文档上看到，而不是执行以下代码：

<div
              v-for="(gift, i) in specificGifts"
              :key="i"
            >
<v-select
                label="How does this specific gift pass if the recipient does not survive?"
                v-model="gift.passThrough"
                :items="specificGiftPassThrough"
              ></v-select>
    </div>

我应该使用：

<div
              v-for="(gift, i) in $v.specificGifts.$each.$iter"
              :key="i"
            >
<v-select
                label="How does this specific gift pass if the recipient does not survive?"
                v-model="gift.passThrough.$model"
                :items="specificGiftPassThrough"
              ></v-select>
    </div>

我的vuejs组件的数据部分如下：

data(){
return{
specificGifts: []
}
}

但是，然后我收到以下控制台错误“无法读取未定义的属性 $model”。当我 console.log $v.specificGifts.$each.$iter 时，我也会收到控制台错误。有谁知道我做错了什么？有没有更好的方法来使用验证？看来 vuelidate 可能跟不上速度，因为它需要我对 $v 属性进行硬编码循环，以便我可以使用 vuelidate，无论如何。

【问题讨论】：

你发现了吗？现在刚刚遇到这个问题，想知道答案是什么。

标签： javascript vue.js vuelidate

【解决方案1】：

我一直在面对一项调查的验证，并希望分享我的解决方案。

我的具体情况是我有很多问题，其中任何一个都有很多答案（一组单选按钮）。我的目标是验证每个问题，以便每个问题都必须检查一个收音机。

首先，我从 API 获取问题对象数组（我的“值”属性不同）：

[
     {
        "value":"a",
        "name":"first question",
        "answers":[
           {
              "label":"first answer",
              "value":"a1"
           },
           {
              "label":"second answer",
              "value":"a2"
           },
           ...
        ]
     },
     {
        "value":"b",
        "name":"second question",
        "answers":[
           {
              "label":"first answer",
              "value":"b1"
           },
           {
              "label":"second answer",
              "value":"b2"
           },
           ...
        ]
     }
     ...
]

然后，在获得 API 响应后，我为答案准备了另一个对象数组：

this.questions.map(function (item) {
  return {
    questionId: item.value,
    answerId: null
  };
})

结果是这样的结构：

[
    {
        questionId: 'a',
        answerId: null,
    },
    {
        questionId: 'b',
        answerId: null,
    }
    ...
]

我使用 quasar 框架作为模板，但我认为你可以用基本的 html 重现这个逻辑：

  <q-field v-for="(question, key) in questions" :key="question.value"
    filled
    :label="question.name"
  >
    <template v-slot:control>
      <q-option-group
        v-model="answers[key].answerId"
        :options="question.answers"
        type="radio"
      />
    </template>
  </q-field>

最后我的验证规则是：

validations: {
  answers: {
    $each: {
      answerId: {
        required
      }
    }
  }
}

【讨论】：

【解决方案2】：

我在使用 Vuelidate 时也遇到了很多麻烦。我能给你的最佳解决方案是从 Vuelidate 更改为 VeeValidate。

更改并不复杂，从长远来看，它将为您节省大量时间。

VeeValidate 提供了许多使用验证的简单方法，包括为每个规则自定义消息（不再计算提供错误消息），并允许您根据特定条件使用规则。

您可以查看文档here

【讨论】：

这并没有解决手头的问题。