Vue JS 自定义指令数据绑定答案

【问题标题】：Vue JS Custom directive data bindingVue JS 自定义指令数据绑定
【发布时间】：2016-04-27 11:55:54
【问题描述】：

我正在创建一个自定义指令以通过 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 的值为空

知道为什么吗？

【问题讨论】：

好像少了道具前面的:：<form action="{{ route('user.settings.update.security', [$user->uuid]) }}" method="POST" enctype="multipart/form-data" v-ajax :errors="formErrors.security" :data="formData.security">
这似乎无法解决问题，仍然没有保存任何内容：/
你在哪里添加任何东西到formErrors，据我所知，你永远不会更新formErrors
我是动态的。我正在从表单上的errors 参数中获取要添加的内容。然后我在指令上使用this.set(this.vm, this.params.errors, response.data); 设置它

标签： javascript laravel vue.js

【解决方案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"。

【讨论】：