Vuelidate，我可以通过 mixin 继承自定义方法吗？

Question

使用 Veulidate，在使用 Vue CLI 构建的项目上使用 VueJS 2，我只是尝试使用自定义方法来验证 phone 数字。该方法来自位于 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
  }
});

form.vue

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

看起来很简单吧？一遍又一遍，我得到 Cannot read property of 'vd_phone' of undefined。尝试了 vd_phone、this.vd_phone、this.vd_phone() 等。

还尝试将方法放入全局方法选项（而不是混合）并尝试通过 $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，但这似乎是在谈论继承整个验证器属性——而不仅仅是一种方法。

感谢任何帮助。

Answer 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;
   }
}

然后在需要该功能的地方导入文件，您就可以访问它了。

Vuelidate，我可以通过 mixin 继承自定义方法吗？

Vuelidate, can I inherit a custom method via mixin?

validation

vue.js

vuelidate