I have a text field for entering a description, but every time I press a key this appears and the page is reloaded:
XHR finished loading: PATCH "http://localhost:3000/ccenter/attachments/51".
I thought the way to tackle this is to set some sort of Timeout for the Value to be set, but I'm very new to JS and haven't figured out the best way to do this and would appreciate any pointers in the correct direction.
What I've tried, which is throwing me the error:
[Vue warn]: Error in render: "TypeError: Setter must be a function: 3"
attachmentAccepted: {
get: function () {
return !this.attachment.ignoreAttachment;
},
set: setTimeout(function (val) {
return this.updateAttachment([this.attachment.id, { ignoreAttachment: !val }]);
}, 3000)
},
EDIT: This removes the reload, but then provides this error, which then stops the value of my Textinput being registered:
set: function (val) { setTimeout(function(){ return this.updateAttachment([this.attachment.id, { strValue: val }]) }, 3000) },
Uncaught TypeError: Cannot read properties of undefined (reading 'id')
EDIT 2: Solved.
set: function (val) { let self = this; setTimeout(function(){ /* your code goes here. change all 'this.' to 'self.' */ }, 3000) }
TL;DR
Replace
set: setTimeout(function (val) {
return this.updateAttachment([this.attachment.id, { ignoreAttachment: !val }]);
}, 3000)
with
set: function (val) {
let self = this;
setTimeout(function(){
self.updateAttachment([self.attachment.id, { ignoreAttachment: !val }]);
}, 3000)
}
[Vue warn]: Error in render: "TypeError: Setter must be a function: 3" means set: property of attachmentAccepted must be a function. Something like set: function(){}.
Uncaught TypeError: Cannot read properties of undefined (reading 'id') means the program cannot read .id of an object. In this case, this.attachment object is undefined, so you cannot do this.attachment.id.
this.attachment is undefined because,
set: function /* <<< SCOPE A function declaration */ (val) {
/* "this" right here is a thing that referring to SCOPE A, and... */
console.log(this)
setTimeout(function() /* <<< SCOPE B function declaration */ {
/* ... "this" right here is another thing that referring to SCOPE B.
And because of the same name, SCOPE A's "this" cannot be used anymore. */
console.log(this)
return this.updateAttachment([this.attachment.id, { strValue: val }])
}, 3000)
}
So just pass SCOPE A's this to SCOPE B. One of the solution is using var self = this; inside SCOPE A. Now you can use SCOPE A's this inside SCOPE B with the self variable.
set: function /* SCOPE A */ (val) {
let self = this;
setTimeout(function /* SCOPE B */ (){
self.updateAttachment([self.attachment.id, { ignoreAttachment: !val }]);
}, 3000)
}
// OR
set: function /* SCOPE A */ (val) {
let SCOPE_A_THIS = this;
setTimeout(function /* SCOPE B */ (){
SCOPE_A_THIS.updateAttachment([SCOPE_A_THIS.attachment.id, { ignoreAttachment: !val }]);
}, 3000)
}
Bonus: Understanding "this" in javascript with arrow functions