vue app using monaco editor freezes after trying to access text from editor

49 Views Asked by At

I am trying to get the value from editor and do something with it later but after I press my button, the whole page freezes, cant press f12 nothing. I am working on an app using vue.js and monaco-editor. Here is my whole code in App.vue:

<template>
  <div class="container">
    <div class="editor-container" ref="editorContainer"></div>
    <textarea v-if="showResult" class="result-field" v-model="result" readonly></textarea>
  </div>
  <button @click="logContent">Spustit</button>
</template>

<script>
import * as monaco from 'monaco-editor'

export default {
  name: 'MonacoEditor',
  data () {
    return {
      editor: null,
      code: '',
      result: '',
      showResult: false
    }
  },
  mounted () {
    this.editor = monaco.editor.create(this.$refs.editorContainer, {
      value: this.code,
      language: 'javascript', // cc
      theme: 'vs'
    })
  },
  methods: {
    logContent () {
      this.result = this.editor.getValue()
      this.showResult = true
    }
  },
  beforeUnmount () {
    if (this.editor) {
      this.editor.dispose()
    }
  }
}
</script>

<style>
.container {
  display: flex;
}

.editor-container {
  width: 50%;
  height: 500px;
  border: 1px solid black;
}

.result-field {
  flex-grow: 1;
  margin-left: 10px;
}

button {
  cursor: pointer;
}
</style>

I tried to write it into console but I cant press f12 after it freezes and nothing. I just know it crashes on this line: .this.result = this.editor.getValue()

0

There are 0 best solutions below