Javascript Vue.js-将整个对象存储在数据中

我想在vue.js应用程序中使用gamepad。因此，我从中提取了一些代码并对其进行了修改：

data() {
  return {
    gamepads: {},
  };
},
created() {
  this.addEventListeners();
},

methods: {
  addEventListeners() {
    window.addEventListener('gamepadconnected', (e) => {
      this.gamepadHandler(e, true);
    });

    window.addEventListener('gamepaddisconnected', (e) => {
      this.gamepadHandler(e, false);
    });
  },

  gamepadHandler(event, connecting) {
    if (connecting) {
      console.log(
        'Gamepad connected at index %d: %s. %d buttons, %d axes.',
        event.gamepad.index,
        event.gamepad.id,
        event.gamepad.buttons.length,
        event.gamepad.axes.length,
      );

      this.gamepads[gamepad.index] = event.gamepad;
    } else {
      console.log(
        'Gamepad disconnected from index %d: %s',
        event.gamepad.index,
        event.gamepad.id,
      );

      delete this.gamepads[event.gamepad.index];
    }
  }
}

当我运行这个程序时，一切似乎都很正常，console.log记录了整个Gamepad对象。但是，当我将这个Gamepad对象存储在数据中时，它被存储为字符串“[object Gamepad]”

---

如何存储真实对象而不仅仅是类名？

这个.gamepad[gamepad.index]

：

gamepad.index

不存在。至少，我可以看到它；所以它应该存在

this.gamepad[gamepad.index]

：

gamepad.index

不存在。至少，我可以看到它；所以它应该存在