Блог

Я попытался использовать проверку коллекций из Vuelidate. (я использую Vue 3). Итак, то, как я это делаю сейчас, отображает поля ввода, но чего мне здесь не хватает, так это проверки, это не работает. У меня должен быть $каждый массив в моем объекте v$, но у меня его нет, и я не знаю, почему, я сделал все, как в документации [https://vuelidate.js.org/#sub-collections-validation]. Какая-нибудь помощь??? Я хочу, чтобы требовались первые два входа.

вот как выглядит мой код:

   <form @submit.prevent="onSubmit">
    <div class="form-items">
      <div
        class="form-group"
        v-for="(property, index) in v$.properties.$model"
        :key="index"
      >
        <label :for="property.name">{{ property.label }}</label>
        <input
          :type="property.type"
          class="form-control"
          :id="property.name"
          v-model="property.value"
        />
      </div>
      <pre>{{ v$ }}</pre>
    </div>
    <Button
      type="submit"
      variant="primary"
      text="Add property"
      :onClick="onSubmit"
    />
  </form>
</template>

<script>
import useVuelidate from "@vuelidate/core";
import { required } from "@vuelidate/validators";
import Button from "../components/Button";

export default {
  name: "PropertyForm",
  components: {
    Button,
  },
  setup() {
    return { v$: useVuelidate() };
  },
  data() {
    return {
      properties: [
        {
          name: "title",
          label: "Title",
          value: "",
          type: "text",
        },
        {
          name: "regular_price",
          label: "Regular price",
          value: "",
          type: "number",
        },
        {
          name: "sales_price",
          label: "Sales price",
          value: "",
          type: "number",
        },
        { name: "zip", label: "Zip", value: "", type: "text" },
        {
          name: "neighborhood",
          label: "Neighborhood",
          value: "",
          type: "text",
        },
        {
          name: "city",
          label: "City",
          value: "",
          type: "text",
        },
        { name: "status", label: "Status", value: "", type: "number" },
      ],
    };
  },
  validations: {
    properties: {
      required,
      $each: {
        name: {
          required,
        },
      },
    },
  },
};
</script>```