Vue.js 方法 - 在 lodash _each 循环中访问 `this`答案

【问题标题】：Vue.js method - Access to `this` within lodash _each loopVue.js 方法 - 在 lodash _each 循环中访问 `this`
【发布时间】：2019-06-11 19:00:05
【问题描述】：

我的应用有一个collaborators 列表，每个旁边都有一个复选框。

用户可以勾选多个协作者，然后单击按钮将其删除，这会触发以下 Vue.js 方法：

methods: {
        remove: function () {
            if (confirm('Are you sure you want to delete these collaborators?')) {
                axios.get('/collaborators/api/destroy', {
                    params: {
                        ids: this.selectedCollaborators
                    }
                })
                    .then(response => {

                        // Loop through the `selectedCollaborators` that were deleted and
                        // remove them from `collaborators`
                        _.each(this.selectedCollaborators, function (value, key) {

                            console.log('Remove collaborator: ' + value);

                            // Following line produces: TypeError: Cannot read property 'collaborators' of undefined
                            this.collaborators.splice(this.collaborators.indexOf(value), 1)

                        });
                    });

            }
        },
// [...etc...]

正如您在上面的代码中看到的，在处理 ajax 响应时，我尝试使用 lodash 的 _each 循环遍历每个 selectedCollaborators，并且对于每一个，从 collaborators 数据中删除该协作者属性使用拼接。

问题是 this.collaborators 在 _.each 函数中不可访问，并产生以下错误：

TypeError: Cannot read property 'collaborators' of undefined

我该如何解决这个问题/是否有更好的方法来处理这个问题？

【问题讨论】：

标签： javascript vue.js lodash

【解决方案1】：

尝试用词法上下文将函数替换为箭头函数：

methods: {
    remove: () => {
        if (confirm('Are you sure you want to delete these collaborators?')) {
            axios.get('/collaborators/api/destroy', {
                params: {
                    ids: this.selectedCollaborators
                }
            })
                .then(response => {

                    // Loop through the `selectedCollaborators` that were deleted and
                    // remove them from `collaborators`
                    _.each(this.selectedCollaborators, (value, key) => {

                        console.log('Remove collaborator: ' + value);

                        // Following line produces: TypeError: Cannot read property 'collaborators' of undefined
                        this.collaborators.splice(this.collaborators.indexOf(value), 1)

                    });
                });

        }
    },

【讨论】：

【解决方案2】：

您可以将this 保存在一个变量中。

methods: {
        remove: function () {
            if (confirm('Are you sure you want to delete these collaborators?')) {
                axios.get('/collaborators/api/destroy', {
                    params: {
                        ids: this.selectedCollaborators
                    }
                })
                    .then(response => {
                        const t = this;
                        // Loop through the `selectedCollaborators` that were deleted and
                        // remove them from `collaborators`
                        _.each(this.selectedCollaborators, function (value, key) {
                            console.log('Remove collaborator: ' + value);
                            t.collaborators.splice(t.collaborators.indexOf(value), 1)
                        });
                    });

            }
        },
// [...etc...]

【讨论】：