socket.io-client redefines this inside function, can't call any other function or variable

[krodh]

I am working on a vue.js application when I found out that this variable is not working inside socket.on function.
Here is the code

<script>
import io from "socket.io-client";

var socket = io.connect("http://localhost:5000");

export default {
  name: "Home",
  data() {
    return {
      messages: ['Foo', 'Bar'],
      message: ""
    };
  },
  methods: {
    send: function() {
      socket.send(this.message);
      this.message = "";
    }
  },
  mounted() {
    socket.on("connect", function () {
      socket.send("User has connected!");
    });

    socket.on("message", function (msg) {
      this.messages.push(msg); // This line
      console.log("Received message");
    });
  },
};
</script>

This gives me an error

TypeError: Cannot read property 'push' of undefined

Then I found out that the this variable is redefined by this function that. Anyone can help me, So that I can append the message to the list in vue.js.

[darrachequesne]

Did you try with an arrow function:

socket.on("message", (msg) => {
  this.messages.push(msg); // This line
  console.log("Received message");
});

If I'm not mistaken, in your code example above, the this points towards the socket object, hence the Cannot read property 'push' of undefined.

[krodh]

I was new to java script and didn't know about this and arrow functions, thanks for figuring out.