Tengo un campo de texto para ingresar una descripción, pero cada vez que presiono una tecla aparece esto y la página se recarga:
XHR finished loading: PATCH "http://localhost:3000/ccenter/attachments/51".Pensé que la forma de abordar esto es establecer algún tipo de tiempo de espera para que se establezca el valor, pero soy muy nuevo en JS y no he descubierto la mejor manera de hacerlo y agradecería cualquier indicación en la dirección correcta. .
Lo que he probado, que me está tirando el 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) },EDITAR: Esto elimina la recarga, pero luego proporciona este error, que luego detiene el registro del valor de mi Textinput:
set: function (val) { setTimeout(function(){ return this.updateAttachment([this.attachment.id, { strValue: val }]) }, 3000) }, Uncaught TypeError: Cannot read properties of undefined (reading 'id')EDICIÓN 2: Resuelto.
set: function (val) { let self = this; setTimeout(function(){ /* your code goes here. change all 'this.' to 'self.' */ }, 3000) }TL;DR
Reemplazar
set: setTimeout(function (val) { return this.updateAttachment([this.attachment.id, { ignoreAttachment: !val }]); }, 3000)con
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" significa set: propiedad del attachmentAccepted debe ser una función. Algo así como set: function(){} .
Uncaught TypeError: Cannot read properties of undefined (reading 'id') significa que el programa no puede leer .id de un objeto. En este caso, el objeto this.attachment no está definido, por lo que no puede hacer this.attachment.id .
this.attachment no está definido porque,
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) } Así que simplemente pase this de SCOPE A a SCOPE B. Una de las soluciones es usar var self = this; dentro de SCOPE A. Ahora puede usar SCOPE A dentro de SCOPE B con this variable self .
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) }Bonificación: comprender "esto" en javascript con funciones de flecha