在 Vee Validate 4 中使用“v-bind”输入，Vue 3 不会填充模型数据-解网

问：

我正在尝试使用 Vee Validate Library 验证 Vue 3 中的输入。验证按预期工作。但是当我尝试编辑表单时，输入没有填充

令人惊讶的是，当输入上未使用“v-bind=”field“”时，输入被正确填充（但这会破坏验证）

这是问题的链接。不带 v-bind 的输入将填充模型数据，但带有 v-bind 的输入不会填充模型数据。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<div id="app">
  <v-form v-on:submit="onSubmit">
    <label>Input With v-bind</label>
    <v-field name="name" rules="required" v-slot="{field, errors}">
      <input type="text" id="name" name="name" class="form-control" rows="6"
                   v-bind="field" v-model="defaultName"
                      />
    </v-field><br>
    <error-message name="name"></error-message><br>
    
    
    
        <label>Input Without v-bind</label>
    <v-field name="name2" rules="required" v-slot="{field, errors}">
      <input type="text" id="name2" name="name2" class="form-control" rows="6"
           v-model="defaultName2"
                      />
    </v-field><br>
    <error-message name="name2"></error-message><br>
    <button type="submit">Submit</button>
  </v-form>
</div>
<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vee-validate@next"></script>
<script src="https://unpkg.com/@vee-validate/rules@next"></script>
<script src="https://unpkg.com/@vee-validate/i18n@next"></script>
<script>
const { defineRule, Form, Field, ErrorMessage, configure } = VeeValidate
const { setLocale, loadLocaleFromURL, localize } = VeeValidateI18n

// import all the rules that come with vee-validate
Object.keys(VeeValidateRules.default).forEach(rule => {
  defineRule(rule, VeeValidateRules[rule])
})



const app = Vue.createApp({
  components: {
    VForm: Form,
    VField: Field,
    ErrorMessage,
  },
  data() {
    return {
    defaultName:'Shadab',
    defaultName2:'Momin'
    }
  },
  methods: {
    onSubmit(values) {
      alert('Submitted')
    }
  }
}).mount('#app')
</script>
</body>
</html>

即使使用 v-bind，也期望输入中填充模型数据（用于验证目的）

javascript html 验证 vuejs3 vee-validate

在 Vee Validate 4 中使用“v-bind”输入，Vue 3 不会填充模型数据

Input with "v-bind" in Vee Validate 4 , Vue 3 does not populate with model data

评论