Question

我创建了一个自定义指令，通过ajax提交表单 - 但是我似乎无法将验证错误绑定到Vue实例。

我在这里添加我的指令：

<form action="{{ route('user.settings.update.security', [$user->uuid]) }}" method="POST"
                    enctype="multipart/form-data" v-ajax errors="formErrors.security" data="formData.security">

我的指示如下：

Vue.directive('ajax', {
        twoWay: true,
        params: ['errors', 'data'],

        bind: function () {
            this.el.addEventListener('submit', this.onSubmit.bind(this));
        },

        update: function (value) {

        },

        onSubmit: function (e) {
            e.preventDefault();

            this.vm
                    .$http[this.getRequestType()](this.el.action, vm[this.params.data])
                    .then(this.onComplete.bind(this))
                    .catch(this.onError.bind(this));
        },

        onComplete: function () {
            swal({
                title: 'Success!',
                text: this.params.success,
                type: 'success',
                confirmButtonText: 'Back'
            });

        },

        onError: function (response) {
            swal({
                title: 'Error!',
                text: response.data.message,
                type: 'error',
                confirmButtonText: 'Back'
            });

            this.set(this.vm, this.params.errors, response.data);
        },

        getRequestType: function () {
            var method = this.el.querySelector('input[name="_method"]');

            return (method ? method.value : this.el.method).toLowerCase();
        },
    });

我的VUE实例看起来像：

var vm = new Vue({
        el: '#settings',

        data: function () {
            return {
                active: 'profile',
                updatedSettings: getSharedData('updated'),
                formData: {
                    security: {
                        current_password: ''
                    }
                },
                formErrors: {
                    security: []
                },
            }
        },

        methods: {
            setActive: function (name) {
                this.active = name;
            },

            isActive: function (name) {
                if (this.active == name) {
                    return true;
                } else {
                    return false;
                }
            },

            hasError: function (item, array, sub) {
                if (this[array][sub][item]) {
                    return true;
                } else {
                    return false;
                }
            },

            isInArray: function (value, array) {
                return array.indexOf(value) > -1;
            },

            showNotification: function () {
                if (this.updatedSettings) {
                    $.iGrowl({
                        title: 'Updated',
                        message: 'Your settings have been updated successfully.',
                        type: 'success',
                    });
                }
            },
        }
    });

但是，当我输出数据时，formErrors.security的值为空

知道为什么吗？

Answer 1

问题在于this.set(/* ... */)行。 this.set与[{1}}或Vue.set的工作方式相同。

vm.$set尝试设置传递给指令的路径：this.set。因此，正在运行v-my-directive="a.b.c"会尝试将this.set('foo')设置为$vm.a.b.c。

你想要做的是：

（ES6）

'foo'

（Vanilla JS）

this.params.errors.splice(0, this.params.errors.length, ...response.data)

这将更新DOM节点上绑定到this.params.errors.splice.apply(this.params.errors, [0,this.params.errors.length].concat(response.data)) param的任何Object。确保您执行errors或v-bind:errors="formErrors.security"。

Vue JS Custom指令数据绑定

1 个答案: