Vue Typescript Konva. Canvas onClick throws "Uncaught SyntaxError: Function statements require a function name"

Question

我怀疑这是一个特定于 Konva 的问题，但由于我使用该库作为示例的基础，所以我想包含我的最少代码来复制它。

只要通过单击 canvas 触发 onMouseDownHandler（以及我的完整代码 onMouseUpHandler），就会在我的 google 开发工具控制台中抛出错误 "Uncaught SyntaxError: Function statements require a function name"，如图所示以下。

通过阅读文档，我使用正确的语法编写了此文档。任何帮助将不胜感激，因为我已经花了很多小时试图解决这个问题。

<template>
  <v-stage
    ref="stage"
    class="konva-stage"
    :config="stageSize"
    :onMouseDown="onMouseDownHandler"
  />
</template>

<script lang="ts">
import Vue from 'vue'
import { Prop } from 'vue-property-decorator'
import Component, { mixins } from 'vue-class-component'
import Konva from 'konva'

@Component({
  name: 'MapCanvas'
})

export default class MapButtons extends Vue {
  stageSize = {
    width: window.innerWidth,
    height: window.innerHeight
  }

  onMouseDownHandler (e: any) : void {
    console.log('mouse down')
  }

}
</script>
<style scoped lang="scss">
.konva-stage {
  background-color: white;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

Answer 1

我自己修好了！

  <v-stage
    ref="stage"
    class="konva-stage"
    :config="stageSize"
    :onMouseDown="onMouseDownHandler" <-- NOT THIS
    @mousedown="onMouseDownHandler" <-- THIS
  />

Vue Typescript Konva. Canvas onClick throws "Uncaught SyntaxError: Function statements require a function name"

Vue Typescript Konva. Canvas onClick throws "Uncaught SyntaxError: Function statements require a function name"

javascript

typescript

vue.js

konvajs