Javascript 获取vis js事件的错误

我正在

vue.js

应用程序中构建一个时间轴，所以我决定使用

vis.js

，但当我想添加一些事件时，它有问题。首先，当我设置

@drop=“myDropCallback（）”

并且当我删除一项时，不会发生任何事情，因此不会调用该函数，但当我放置

@mouseOver=“myDropCallback（）”

时，它会工作，这很奇怪

第二，在执行

mouseOver

事件时，我希望使用

this.$refs.timeline.getEventProperties（event）

获取事件属性，但每次都会出现此错误

“单击”的事件处理程序中出错：“TypeError:无法读取未定义的属性“center”

这个错误呢

无法读取未定义的属性“center”

有人知道如何解决这个问题吗？还是我做错了什么

模板

<timeline v-if="items.length > 0" ref="timeline"
  :items="items"
  :groups="groups"
  :options="options"
  @drop="myDropCallback()">
</timeline>

时间线图

---

这里有一段摘自vis.js源代码的摘录。您会注意到，它尝试做的第一件事是找到事件的中心值

Timeline.prototype.getEventProperties = function (event) {
  var clientX = event.center ? event.center.x : event.clientX;
  var clientY = event.center ? event.center.y : event.clientY;
  var x;
  if (this.options.rtl) {
    x = util.getAbsoluteRight(this.dom.centerContainer) - clientX;
  } else {
    x = clientX - util.getAbsoluteLeft(this.dom.centerContainer);
  }
  var y = clientY - util.getAbsoluteTop(this.dom.centerContainer);

  var item = this.itemSet.itemFromTarget(event);
  var group = this.itemSet.groupFromTarget(event);
  var customTime = CustomTime.customTimeFromTarget(event);

  var snap = this.itemSet.options.snap || null;
  var scale = this.body.util.getScale();
  var step = this.body.util.getStep();
  var time = this._toTime(x);
  var snappedTime = snap ? snap(time, scale, step) : time;

  var element = util.getTarget(event);
  var what = null;
  if (item != null) {
    what = 'item';
  } else if (customTime != null) {
    what = 'custom-time';
  } else if (util.hasParent(element, this.timeAxis.dom.foreground)) {
    what = 'axis';
  } else if (this.timeAxis2 && util.hasParent(element, this.timeAxis2.dom.foreground)) {
    what = 'axis';
  } else if (util.hasParent(element, this.itemSet.dom.labelSet)) {
    what = 'group-label';
  } else if (util.hasParent(element, this.currentTime.bar)) {
    what = 'current-time';
  } else if (util.hasParent(element, this.dom.center)) {
    what = 'background';
  }

  return {
    event: event,
    item: item ? item.id : null,
    group: group ? group.groupId : null,
    what: what,
    pageX: event.srcEvent ? event.srcEvent.pageX : event.pageX,
    pageY: event.srcEvent ? event.srcEvent.pageY : event.pageY,
    x: x,
    y: y,
    time: time,
    snappedTime: snappedTime
  };
};

因此，您的问题很可能是因为没有为该方法提供有效的事件。我认为这是因为您没有向getEventProperties方法提供任何参数。我想尝试一下：

myDropCallback: function (event) {
  console.log('value', this.$refs.timeline.getEventProperties(event))
},

---

另外，vis.js的一位作者回答了一篇很好的堆栈溢出帖子：

那么这就是vis.js的getEventProperties函数？我试图将事件发送到函数，但收到了相同的错误。当我从括号中删除事件时，我没有收到任何错误，getEventProperties正在返回我想要的内容。但这是在mouseOver、mouseLeave、click等上。当我尝试执行drop事件时，什么都没有发生。我是否需要自己编写drop事件？这里是另一个很好的例子。查看开发者工具中的sources选项卡，并查看drag&drop.html的源代码。看起来您需要在要拖到时间线上的项目上注册dragstart事件侦听器。

myDropCallback: function (event) {
  console.log('value', this.$refs.timeline.getEventProperties(event))
},