My app has a list of collaborators
, and a checkbox next to each one.
The user can check off multiple collaborators, then click a button to remove them, which triggers the following Vue.js method:
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...]
As you can see in the above code, when handling the ajax response, I attempt to loop through each of the selectedCollaborators
using a lodash's _each
, and for each one, remove that collaborator from the collaborators
data property using splice.
The problem is this.collaborators
is not accessible within the _.each function and the following error is produced:
TypeError: Cannot read property 'collaborators' of undefined
How can I fix this/is there a better way to handle this?
What you can do is save this
in a variable.
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...]
Try replace function to arrow function with lexical context:
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)
});
});
}
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.