Vue js.使用vuelidate验证数组的每个字符串并在每个项上显示错误消息时出现问题

w6lpcovy 于 2022-11-30 发布在 Vue.js

关注(0)|答案(1)|浏览(268)

我有一个vue项目，我用表单收集测试答案，我想用{ required }验证每个输入，但我没能做到。我有下面的代码，但它导致检查是否有数组，而不是检查它的每个字符串是否存在。这是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>

这是在<script>部分

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,
       
      },
    };
  },

我试过使用$each助手，但在vuelidate文档中，他们说他们删除了它，并添加了新的forEach助手，但效果不佳。这是我已经尝试过的：

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

使用forEach辅助函数：

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

在forEach中也使用element

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

但这会导致lint错误。
有没有其他方法可以实现这一点，或者我在哪里犯了错误？

vue.js

来源：https://stackoverflow.com/questions/72390005/vue-js-problem-validating-each-string-of-an-array-with-vuelidate-and-displaying

1条答案

按热度按时间

bmp9r5qi1#

可使用以下格式：

脚本

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>

赞(0）回复(0）举报 2022-11-30

我来回答

Vue js.使用vuelidate验证数组的每个字符串并在每个项上显示错误消息时出现问题

1条答案

相关问题

热门标签

最新问答