vue 3 上的 Codemirror，无法读取未定义的 属性 'on'

Question

我正在尝试在 vue 3 上安装 Codemirror，更具体地说是使用 laravel/Inertia。我希望对于编辑器中的每个更改，它都会更新变量的值。但是 'on' 更改事件永远不会触发

data(){
   return {
      cm: null
   }
}

mounted() {
        this.cm = CodeMirror.fromTextArea(this.$refs.codemirror, {
            mode: 'sql',
            theme: 'lucario',
        }).setSize("100%",200).on('change',function(){
            console.log('Hello')
        })
    },

组件按预期呈现，但出现以下错误

Cannot read property 'on' of undefined

Answer 1

根据错误消息，我假设 CodeMirror 实例上的 setSize 函数不是 return 实例，因此不可链接

尝试分成不同的行，例如：

this.cm = CodeMirror.fromTextArea(this.$refs.codemirror, {
  mode: 'sql',
  theme: 'lucario',
 }):

this.cm.setSize("100%",200);

this.cm.on('change',function(){
  console.log('Hello');    
})