0

我尝试使用来自 Vuelidate 的集合验证。(我正在使用 Vue 3)。所以,我现在这样做的方式是呈现输入字段,但我在这里缺少的是验证,它不起作用。我的 v$ 对象中应该有 $each 数组,但我没有,也不知道为什么,我按照文档 [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>```
4

0 回答 0