Как правильно добавить пользовательскую проверку в массив в vuelidate

Question

У меня есть массив объектов со следующей структурой

varientSections: [
    {
      type: "",
      values: [
        {
          varientId: 0,
          individualValue: ""
        }
      ]
    }
  ]

Я создал пользовательскую проверку под названием isDuplicate, которая проверяет наличие дублирующегося значения для свойства "type".Например,

varientSections: [
    {
      type: "Basket",
      values: [
        {
          varientId: 0,
          individualValue: ""
        }
      ]
    },
    {
      type: "Basket", // ERROR: Duplicate with the "above" object
      values: [
        {
          varientId: 1,
          individualValue: ""
        }
      ]
    }
  ],

Мне удалось настроить свою пользовательскую проверку.Однако свойство $ invalid будет иметь значение false для всех объектов, присутствующих в массиве.Следовательно, все объекты в массиве будут выделены красным

Ниже приведен мой проверочный код:

validations: {
varientSections: {
  $each: {
    type: {
      required,
      isDuplicate(type, varient) {
        console.log(varient);
        const varientIndex = this.varientSections.findIndex(
          v => v.type === type
        );

        var isWrong = true;
        this.varientSections.forEach((varObject, index) => {
          if (index !== varientIndex) {
            if (varObject.type === varient.type) {
              isWrong = false;
            }
          }
        });

        return isWrong;
      }
    },
    values: {
      $each: {
        individualValue: {
          required
        }
      }
    }
  }
}
},

Answer 1

Должно быть что-то вроде этого.

<div v-for="(vs, index) in varientSections" :key="index">
    <input :class="{'is-error': $v.varientSections.$each[index].type.$error}" type="text" v-model="vs.type">
    <input :class="{'is-error': $v.varientSections.$each[index].value.$error}" type="text" v-model="vs.value>
</div>

Измените класс ошибки в соответствии с вашими потребностями.