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()