Question

在使用Vue CLI构建的项目中，使用Veulidate和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
  }
});

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()等。

还尝试将方法放入全局方法选项（而不是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上发现的所有内容，但这似乎是在谈论继承整个验证器属性-而不仅仅是方法。

感谢您的帮助。

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

然后将文件导入您需要的功能所在的位置，您将可以访问它。

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

1 个答案: