Question

每次我访问登录页面时，由于错误都不会呈现

validationMixin __。a.required不是函数

我尝试通过将其更改为直接路径来简化导入

来自“ @ leadlucky / leadlucky-themes / src / mixins / validationMixin.js”

但错误中所有改变的是

leadlucky_themes __。b.required不是函数。

到

validationMixin __。a.required不是函数

所以我将其追溯到validationMixin.js中的“ required”函数。该文件来自我的另一个与npm链接的项目。（npm链接@ leadlucky / leadlucky-themes）

这是validationMixin.js（带有“必需”方法）和导致问题的代码部分：

Imgur to pics

这是控制台错误： Imgur link

该页面有望呈现我的登录页面。我最好的猜测是，在某些竞争条件下，validationMixin.js在执行之前没有导入。我该如何解决？在其他所有页面上都可以正常工作。

Answer 1

Woo经过5个小时的研究和大量研究解决了该问题。因此，事实证明这是一种竞争条件，在声明任何内容之前，data（）正在调用JS文件。通过在导出默认值之外用名为mixin的const替换所有内容来解决此问题。

第二，如果告诉您VariableName.method（'blah'）不是数据中的函数，请尝试在末尾添加[0]。

 data: function() {

      return {
        username: {value: "", validator: validationMixin.required('Username')[0]},
        password: {value: "", validator: validationMixin.passwordRules[0]},
        passwordConfirm: {value: "", validator: 'x'}
}}

这是我更新的混合代码：

function buildRules(regExps = [], fns = [], errorMessages = ["Input is invalid"]){
  return [(field) => {
    if(!field) {
      return errorMessages[0];
    }

    let errMessage = null;
    let i = 1;
    regExps.every((exp) => {
      if(!exp.test(field)){
        errMessage = i < errorMessages.length ? errorMessages[i] : errorMessages[0];
        return false;
      }
      i++;
      return true;
    });
    if (!errMessage) {
      fns.every((fn) => {
        if (!fn(field)) {
          errMessage = i < errorMessages.length ? errorMessages[i] : errorMessages[0];
          return false;
        }
        i++;
        return true;
      });
    }

    return errMessage || true;
  }]
}

const mixin = {}
  mixin.emailRules = buildRules(
    [/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/],
    [],
    ['Invalid email']
  );

  mixin.userIdRules = buildRules(
  [/^[A-Za-z0-9]*$/],
  [],
  ['Invalid username']
  );

  mixin.passwordRules = buildRules(
  [],
  [
    pwd => pwd.length >= 8,
    pwd => /.*[A-Z].*/.test(pwd) && /.*[a-z].*/,
    pwd => /.*[0-9].*/.test(pwd),
    pwd => /.*[!@#$%^&*()\-_=+[{}\]| /\\.,<>`~'";:?].*/.test(pwd)
  ],
  [
    'You must create a password',
    'Password must be at least 8 characters',
    'Password must contain upper and lowercase letters',
    'Password must contain a number',
    'Password must contain a special character',
  ]
);

mixin.required = (fieldName) => buildRules([],[],[`${fieldName} is required`]);

mixin.checkedRule = (message) => buildRules([],[],[message]);

mixin.passwordsMatch = (originalPassword) => buildRules(
  [],[(validatePassword) => validatePassword === originalPassword],
  ['Passwords must match']
);

mixin.urlRule = buildRules(
  [],
  [(url) => {
    if(url.toLowerCase().startsWith('http://')){
      url = url.substring('http://'.length)
    }
    if(url.toLowerCase().startsWith('https://')){
      url = url.substring('https://'.length)
    }
    return /[A-z|0-9]+\.[A-z|0-9]{2,22}/.test(url)
  }],
  ['Invalid URL']
);

mixin.pageIdRule = buildRules([/^[A-Za-z0-9]*$/], [], 'Invalid Page Id')

export default mixin

最后，我不得不将JS文件添加为mixin而不是组件，或者尝试直接使用它。

ValidationMixin缺少必需的功能，竞赛条件？

1 个答案: