Level 2
I think you are missing the arrow notation
Function ( (event) => { … });
Or something in this style. Otherwise you loose context.
1 like
Jul 2, 2022
7
Level 13
Problem with "this" inside Alpine function
I'm creating a webcam recorder for my application using Alpine. I got most of the things working as expected, except that Chrome throws error for the following block of code -
toggleRecordingStatus() {
if(this.mediaRecorder.state === "inactive")
{
this.recordingStatus = "Stop Recording";
this.recordedBlobs = [];
this.mediaRecorder.start()
// Following block throws error. Apparantly "this' ain't working right.
this.mediaRecorder.ondataavailable = function(event) {
this.recordedBlobs.push(event.data);
};
}
Error thrown in console -
Uncaught TypeError: Cannot read properties of undefined (reading 'push')
at mediaRecorder.ondataavailabl
Can someone help me fix this, please?
Level 13
@axeloz - appreciate your response. I'm a JS newbie. Did you suggest this ->
this.mediaRecorder.ondataavailable = function(event) => {
console.log('ok');
this.recordedBlobs.push(event.data);
};
phpStorm shows error on the => part.
Level 13
Oh wait! This works -
this.mediaRecorder.ondataavailable = (event) => {
console.log('ok');
this.recordedBlobs.push(event.data);
};
What's with this => ?
Level 2
@thebigk I’m no JS expert either but this makes sure you keep the context and still have access to « this »
Level 2
Is it solved then? Don’t hesitate to mark as solution. Enjoy
Level 2
@thebigk This is called an arrow function. It does not bind a new this instance to the function where as the function() { } does get a new instance within the block, curly brackets.
Hope this helps ;)
1 like
Level 2
You forgot a ( and a ) at the end See my previous post
1 like
Please or to participate in this conversation.