I have integrated Ace Editor with Vue3 using the Vue3 Ace Editor plugin:
<v-ace-editor
v-model:value="currentRecord.prompt"
lang="json"
theme="textmate"
style="height: 100%;"
:options="{
showGutter: pipeline.input_mode!=='text',
showPrintMargin: false,
useWorker: true,
}"
/>
The initialization code is as follows:
<script setup>
import {computed, ref, watch} from 'vue';
import {VAceEditor} from 'vue3-ace-editor';
import ace from 'ace-builds';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-textmate';
import workerJsonUrl from 'file-loader?esModule=false!ace-builds/src-noconflict/worker-json.js';
ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl);
//Loading different JSON texts:
const props = defineProps({
records: {
type: Object,
},
});
let currentRecordIndex = ref(0)
let currentRecord = computed(() => collect(props.records).slice(currentRecordIndex.value).first() ?? {'prompt': ''})
</script>
Now, I want to automatically save the value of currentRecord.prompt to my backend database whenever it changes in the editor. My approach was to trigger a request to the backend each time the currentRecord.prompt value changed:
watch(() => currentRecord, () => {
console.log("Current record has been updated.");
//Backend request logic here.
});
The issue I am facing is that the watch does not detect changes when the text in the editor is modified.