Vue JS自定义指令数据绑定

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与Vue.set或vm.$set的工作方式不同。

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

你想要做的是：

(ES6)

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

(香草JS)

this.params.errors.splice.apply(this.params.errors, [0,this.params.errors.length].concat(response.data))

这将更新绑定到DOM节点上的errors参数的任何对象。确保使用v-bind:errors="formErrors.security"或:errors="formErrors.security"。