1

使用 Veulidate，在使用 Vue CLI 构建的项目上使用 VueJS 2，我只是尝试使用自定义方法来验证电话号码。该方法来自位于 main.js 中的全局 mixin。

main.js

Vue.mixin({
  methods: {
    vd_phone(val) {
      var phonePattern = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
      return phonePattern.test(val) ? true : false
  }
});

表单.vue

validations: {
  phone: {
    required,
    phone: this.vd_phone
  }
}

看起来很简单，对吧？一遍又一遍，我明白了Cannot read property of 'vd_phone' of undefined。试过vd_phone, this.vd_phone,this.vd_phone()等..

还尝试将方法放入全局方法选项（而不是 mixin）并尝试通过 $root 访问它，如下所示：

main.js

var vm = new Vue({
  router, el: '#app', store,
  methods: {
    vd_phone() {
      var phonePattern = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
      return phonePattern.test(val) ? true : false;
    }
  },
  render: h => h(App)
});

同样的问题！在我的 form.vue 文件中，我尝试使用 , 等访问此方法this.$root.vd_phone。$root.vd_phone没有骰子。

这就是我在该主题上找到的全部内容：https ://github.com/vuelidate/vuelidate/issues/308 ，但这似乎是在谈论继承整个验证器属性——而不仅仅是一种方法。

任何帮助表示赞赏。

4

1 回答 1

1

您正在使用工厂模式从它的源中实例化一个函数，以便在其他文件中使用。为此，您必须从源文件中导出，以便其他文件可以导入它，如下所示：

main.js

export default {
      vd_phone(val) {
         var phonePattern = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
         return phonePattern.test(val) ? true : false;
   }
}

然后将文件导入您需要该功能的任何地方，您将可以访问它。

于 2019-06-10T13:47:28.030 回答