使用自定义 vuelidate 函数访问 Nuxt 中的组件方法

Question

我有一种方法可以在国际象棋游戏中获取任何给定方格的合法国际象棋走法，我想在自定义 vuelidate 函数中使用它。 These docs 说我应该能够通过将其作为第二个参数传递来访问 'vm' 但它不起作用。我已经尝试了很多不同的方法，但只得到各种似乎与找不到 'vm' 有关的错误。而不是 post 错误，我只是转述我正在努力完成的事情和 post 当前代码。

这是我在导出之外定义的两个验证函数。我希望他们都使用组件方法中的 getLegalMoves() 方法。将 'vm' 放入 args 应该可以访问。

const legalActiveSquare = (square, vm) => { return vm.getLegalMoves(square).length() > 0 };
const legalTargetSquare = (values, vm) => { return vm.getLegalMoves(values.activeSquare).includes(values.targetSquare) };

这是我的验证：

validations: {
        activeSquare: { required, squareRegex, legalActiveSquare },
        targetSquare: { required, squareRegex, legalTargetSquare },
    },

这是计算错误之一的示例：

computed: {
        activeSquareErrors () {
            const errors = [];
            if (!this.$v.activeSquare.$dirty) return errors
            !this.$v.activeSquare.required && errors.push('Required');
            !this.$v.activeSquare.squareRegex && errors.push('Should look like e4 or E4')
            !this.$v.activeSquare.legalActiveSquare(this.activeSquare, this.$vm) && errors.push('No legal moves for this square')
            return errors;
        }
}

那么我如何从 vuelidate const 范围内进入我的组件的方法？

Answer 1

我最终遇到了这个解决方案：

验证函数：

var legalActiveSquare = (value, vm) => { return vm.getLegalMoves(vm.activeSquare).length > 0 };
var legalTargetSquare = (value, vm) => { return vm.getLegalMoves(vm.activeSquare).includes(vm.targetSquare) };

验证列表：

validations: {
        activeSquare: { required, squareRegex, legalActiveSquare },
        targetSquare: { required, squareRegex, legalTargetSquare },
    },

示例计算验证函数：


        activeSquareErrors () {
            const errors = [];
            if (!this.$v.activeSquare.$dirty) return errors
            !this.$v.activeSquare.required && errors.push('Required');
            !this.$v.activeSquare.squareRegex && errors.push('Should look like e4 or E4')
            !this.$v.activeSquare.legalActiveSquare && errors.push('No legal moves for this square')
            return errors;
        },

使用自定义 vuelidate 函数访问 Nuxt 中的组件方法

Using custom vuelidate function to access component methods in Nuxt

nuxt.js

vuelidate