Cannot read property 'idCounter' of undefined

edit

Hello,

I an programming a navigation tool for ROS in a VUE.js environment. Everything works fine with the lib but only the Topic.publish() function makes some trouble.

Here is the Code:

<template>
  <div class="navigation" v-bind="mounted()">
    <p>Navigation</p>
    <p>Name: {{robot.name}}</p>
    <div class="nav-buttons-container">
      <p><button class="nav-btn" v-on:click="navigation('forward')">Forward</button></p>
      <p><button class="nav-btn" v-on:click="navigation('left')">TurnLeft</button><button class="nav-btn" v-on:click="navigation('right')">TurnRight</button></p>
      <p><button class="nav-btn" v-on:click="navigation('backward')">Backward</button></p>
    </div>
  </div>
</template>



<script>
require('../assets/roslibjs-develop/build/roslib.js');

export default {
  name: "Navigation",
  props: {
    robot: {
      type: Object
    }
  },
  data() {
    return {
      message: "This is a great Message2!"
    };
  },
  methods: {
    navigation(direction){

      var ros = new ROSLIB.Ros({
        url : 'wss://echo.websocket.org'
      });

      var rosTopic = new ROSLIB.Topic({
              ros : this.ros,
              name : '/cmd_vel_mux/input/navi',
              //this is the topic, where all security features are disabled!
              //name: '/yocs_cmd_vel_mux/fine_pos/cmd_vel',
              messageType : 'geometry_msgs/Twist'
      });

      var vector = new ROSLIB.Message({
              linear :{x : 0.0, y : 0.0, z : 0.0},
              angular:{x : 0.0, y : 0.0, z : 0.0}
      });

      var force = 1.5;
      var vTrans = 0.5;
          var vRot = 0.6;
      var dx=0.0;
      var dy=0.0;

      if(direction === 'forward'){
        alert(1);
        var radian = 1.5707963267948966;

        dx = Math.cos(radian)*Math.min(force, 1.0);
        dy = Math.sin(radian)*Math.min(force, 1.0);
      }
      else if(direction === 'left'){
        alert(2);
        var radian = 3.141592653589793;

        dx = Math.cos(radian)*Math.min(force, 1.0);
        dy = Math.sin(radian)*Math.min(force, 1.0);
      }
      else if(direction === 'right'){
        alert(3);
        var radian = 0;

        dx = Math.cos(radian)*Math.min(force, 1.0);
        dy = Math.sin(radian)*Math.min(force, 1.0);
      }
      else if(direction === 'backward'){
        alert(4);
        var radian = 4.71238898038469;

        dx = Math.cos(radian)*Math.min(force, 1.0);
        dy = Math.sin(radian)*Math.min(force, 1.0);
      }

      vector.linear.x = vTrans*dy;
      vector.angular.z = -vRot*dx;

      alert("sending to ros: %o", vector.linear);

      rosTopic.publish(vector);
    }, 

    mounted() {
      window.addEventListener("keypress", function(e) {
        if(e.key === 'w'){
          alert('W was pressed');
          this.navigation('forward');
        }
        else if (e.key === 'a'){
          alert('A was pressed');
          this.navigation('left');
        }
        else if (e.key === 'd'){
          alert('D was pressed');
          this.navigation('right')
        }
        else if (e.key === 's'){
          alert('S was pressed');
          navigation('backward')
        }
        else {
          alert("Navigate with the buttons WASD. Your pressed Key is: " + e.key);
        }
      }.bind(this));
    }
  }
};
</script>