Vee-Validate 在进行配置时显示空白页

Question

我使用 Vue3.0 并且还使用 Vee-validate 来验证我的表单。但我不知道为什么它一直显示空白页只是like in this picture

我已经按照他们在文档中所说的做了，这是我的代码

<form class="wrap" id="signup-form col-lg-5" @submit.prevent="processForm">
                    <div class="row mb-5">
                        <router-link :to="{'name': 'Home'}">
                            <span class="iconify" data-icon="ion:return-up-back-outline" data-width="25" data-height="25"></span>
                            <button class="btn">Back</button>
                        </router-link>
    
                    </div>
                    <!-- full name -->
                    <div class="form-group row">
                        <label for="name">Full Name <span class="text-danger">*</span></label>
                        <ValidationProvider rules="positive|odd" v-slot="err">
                        <input type="text" class="form-control" v-model.trim="name">
                        <span>{{ err.errors[0] }}</span>
                        </ValidationProvider>
                    </div>
      
                    <!-- submit button -->
                    <div class="row d-flex align-items-center">
                        <button type="submit" class="btn btn-outline-dark col-sm-4">Submit</button>
                        <p style="cursor:pointer;" class="col-sm-7">
                            <router-link :to="{name:'Login'}">Has an account? Login</router-link>
                        </p>
                    </div>
                </form>

这是我的脚本

<script>
import { ValidationProvider } from 'vee-validate';
import { extend } from 'vee-validate';

extend('odd', value => {
  return value % 2 !== 0;
});
extend('positive', value => {
  return value >= 0;
});

export default {
  name: 'RegisterForm',
  components: {
      ValidationProvider
  },
  data: function(){
      return{
          name: '',
      }
  },
  methods: {
    processForm() {
        this.$emit('form-submit', 
        {
            'name': this.email,
            'password': this.password,
        })
    }
  }
}
</script>

我应该对代码进行哪些更改？对了，Vee-Validator是不是应该在main.js中赋值？

Answer 1

看起来你正在使用vee-validate v3.x，它与 Vue 3 不兼容

vee-validate v4 最近发布，支持 Vue 3，但 API 完全不同

https://vee-validate.logaretm.com/v4/