VUE JS。验证数组的每个字符串的问题，并在每个项目上显示错误消息

Question

我有一个VUE项目，其中我用表格收集测试答案，我想用{quirck}验证每个输入，但我没有这样做。我有以下代码，但会导致检查是否存在数组而不是检查其是否存在。 这是html模板：

  <form
    class="forms-test"
    v-for="(testItem, index) in testItems"
    :key="testItem.block"
  >
    <div class="TaskComponent" id="taskSection2">
      <div class="task-no-pictureS2">
        <h4>{{ t("task") }}: {{ t("calculate") }}</h4>
        <p>
          {{ testItems[index].task }}
        </p>
        <BaseInput
          class="answerBox"
          :placeholder="t('type')"
          v-model="studentAnswers[index]"
          :label="t('answer')"
          type="text"
        />
      </div>
      <p v-if="v$.studentAnswers.$error">
         {{ v$.studentAnswers.$errors[0].$message }}
      </p>

    </div>
  </form>

这是在＆lt; script＆gt;

  data() {
    return {
      v$: useValidate(),
      studentAnswers: [],
      language: i18n.global.locale.value,
      answerOptions: [
        { label: this.t("true"), value: this.t("true") },
        { label: this.t("false"), value: this.t("false") },
      ],
    };
  },

  validations() {
    return {
      studentAnswers: {
        required,
       
      },
    };
  },

我尝试使用$每个 helper 中尝试的部分foreach也无法正常工作的帮手。这就是我已经尝试的：

  validations() {
    return {
      studentAnswers: {
        $each: {
          required
          },
      },
    };
  },

使用foreach助手：

  validations() {
    return {
      studentAnswers: {
        $each: helpers.forEach({
          required,
        }),
      },
    };
  },

也使用element in foreach中，

  validations() {
    return {
      studentAnswers: {
        $each: helpers.forEach(element =>{
          element: { required }
        }),
      },
    };
  },

但这给出了皮棉错误。

有其他方法可以实现这一目标，还是我在某处犯了错误？

Answer 1

vocêpode fiturizar da seguinte forma：

脚本

import { useVuelidate } from '@vuelidate/core'
import { required, minLength, helpers } from '@vuelidate/validators'

export default {
  name: 'NomeComponente',

setup() {
  return { v$: useVuelidate() }
},

data() {
  return {
    question: {
      text: '',
      answers: [
        {
          text: '',
        },
        {
          text: '',
        },
        {
          text: '',
        },
        {
          text: ''
        },
      ],
      answerCorrect: '',
    },
  }
},

validations() {
  return {
    question: {
      text: {
        required,
        minLength: minLength(4),
      },
      answers: {
        $each: helpers.forEach({
          text: { required },
        }),
      },
      answerCorrect: {
        required,
      },
    },
  }
},

html

<div class="form-row">
  <div class="form-group col-sm-12">
    <label>Pergunta: <span class="text-danger">*</span></label>
    <textarea
      class="form-control"
      :class="{ 'is-invalid': v$.question.text.$errors.length }"
      placeholder="Pergunta"
      v-model="v$.question.text.$model"
    />
    <span
      v-if="v$.question.text.required.$invalid"
      class="invalid-feedback"
    >
      O campo é obrigatório
    </span>
    <span
      v-if="v$.question.text.minLength.$invalid"
      class="invalid-feedback"
    >
      A pergunta deve possuir pelo menos
      {{ v$.question.text.minLength.$params.min }} caracteres
    </span>
  </div>
</div>  

<div class="form-row">
  <div
    v-for="(answer, index) in question.answers"
    :key="index"
    class="form-group col-sm-6"
  >
    <label>
      Alternativa {{ index + 1 }}:
      <span class="text-danger">*</span>
    </label>
    <textarea
      class="form-control"
      :class="{
        'is-invalid': v$.question.answers.$each.$response.$data[index].text.$error,
      }"
      placeholder="Pergunta"
      v-model="v$.question.answers.$model[index].text"
    />
    <span
      v-if="v$.question.answers.$each.$response.$data[index].text.$invalid"
      class="invalid-feedback"
    >
      O campo é obrigatório
    </span>
  </div>
</div>

<div class="form-row">
  <div class="form-group col-sm-12 mb-0">
    <label>
      Alternativa Correta: <span class="text-danger">*</span>
    </label>
    <br />
    <div
      v-for="(answer, index) in question.answers"
      :key="index"
      class="form-check form-check-inline"
    >
      <input
        type="radio"
        class="form-check-input"
        :id="`answer${index}`"
        name="answer"
        v-model="v$.question.answerCorrect.$model"
        :value="index"
      />
      <label class="form-check-label" :for="`answer${index}`">
        Alternativa {{ index + 1 }}
      </label>
    </div>
  </div>
</div>