VeeValidate with Yup: input type="number" 值在提交时转换为字符串

如何解决VeeValidate with Yup: input type="number" 值在提交时转换为字符串

我使用 veevalidate 和 Yup 进行表单验证，但不知道为什么我的 type="number" 输入字段在提交时转换为字符串。

当我输入 78 并提交表单时，onSubmit(values) 函数中 console.log 的输出如下：

values: {
   prioritaet: "78"
}

我在这里做错了什么还是这是 veevalidate 和 Yup 的正常行为？提交后我想要一个数字而不是一个字符串。

我的代码如下：

<template>
  <div class="container m-3">
    <div class="row bg-primary align-items-center py-2">
      <div class="col">
        <h3 class="text-light mb-0">Format {{ this.action }}</h3>
      </div>
      <div class="col-auto">
        <h5 class="text-light mb-0">{{ this.formatTitle }}</h5>
      </div>
    </div>

    <Form @submit="onSubmit" :validation-schema="formatSchema" v-slot="{ errors }" ref="formatForm">
      <div class="row mt-4">
        <div class="col">
          <h5>Formatdaten</h5>
        </div>
      </div>

      <div class="row mb-2">
        <div class="col-4">
          <label for="prioritaet-input">Priorität: </label>
        </div>
        <div class="col">
          <Field type="number" name="prioritaet" id="prioritaet-input" class="w-100" />
        </div>
      </div>

      <div class="row justify-content-end">
        <div class="col-auto me-auto">
          <button class="btn btn-outline-primary">Änderungen übernehmen</button>
        </div>
        <div class="col-auto">
          <button class="btn btn-outline-primary">Abbrechen</button>
        </div>
        <div class="col-auto">
          <button type="sumbit" class="btn btn-outline-primary">Speichern</button>
        </div>
      </div>
      
      <div class="row mt-4">
        <template v-if="Object.keys(errors).length">
          <span class="text-danger" v-for="(message,field) in errors" :key="field">{{ message }}</span>
        </template> 
      </div>
    </Form>

  </div>
</template>
<script>
import { Form,Field } from "vee-validate";
import deLocale from "../assets/yup-localization.js";
import * as Yup from "yup";
import { markRaw } from "vue";

import { mapActions,mapState } from "vuex";

Yup.setLocale(deLocale);

export default {
  name: "FormatBearbeitungsSchirm",props: ["material_id"],data() {
    let action = "neu";
    let formatTitle = "Format neu";

    let formatSchema = markRaw(Yup.object().shape({
      prioritaet: Yup.number().min(1).max(100).integer().label("Priorität"),}));

    return { formatSchema,action,formatTitle };
  },created() {

  },components: {
    Form,Field,},methods: {
    onSubmit(values) {
      console.log("values",values);
    },};
</script>

解决方法

目前似乎不支持在 .number 的内部字段模型值上指定 <Field> 修饰符，因此发出的表单 values 将始终包含 {{ 1}} 类型的字段。

一种解决方法是转换模板中的值，更新 <Form>'s values slot prop 中的 <Field>'s update:modelValue event：

number

demo

另一个简单的解决方法是在使用它之前转换 <Form @submit="onSubmit" v-slot="{ values }"> <Field ? type="number" name="prioritaet" ? @update:modelValue="values.prioritaet = Number(values.prioritaet)" /> <button>Submit</button> </Form> 中的属性：

onSubmit

,

您必须使用 .number 修饰符。

你可以阅读它here

如果您希望用户输入自动类型转换为数字，您可以将数字修饰符添加到您的 v-model 管理输入：

const app = new Vue({
  el: "#app",data: () => ({
      mynumber1: undefined,mynumber2: undefined
  }),methods: {
    submit() {
      console.log(typeof this.mynumber1,this.mynumber1)
      console.log(typeof this.mynumber2,this.mynumber2)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
  <form>
  <!-- number modifier -->
 <input type="number" v-model.number="mynumber1" placeholder="Type here" />
  <!-- no modifier -->
 <input type="number" v-model="mynumber2" placeholder="Type here" />
 <input type="button" @click="submit" value="submit" />
 </form>
</div>