Estoy usando Ace Editor con Vue3:
<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, }" />Se está inicializando así:
<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); //Load in a set of 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> Ahora, quiero conservar automáticamente el valor de currentRecord.prompt en mi base de datos en el backend. Para hacer esto, estaba pensando en disparar una solicitud al backend cada vez que se cambiaba el valor de currentRecord.prompt en el editor:
watch(() => currentRecord, () => { console.log("Current record was changed."); //Code to hit the backend comes here. }); El problema aquí es que el watch no funciona/se activa cada vez que se realiza un cambio en el texto en el editor.
Como estoy viendo un objeto, necesito habilitar la opción deep de esta manera:
watch(currentRecord, () => { //... }, {deep: true}) Como usar deep puede ser costoso (ver declaración oficial):
La vigilancia profunda requiere atravesar todas las propiedades anidadas en el objeto vigilado y puede ser costosa cuando se usa en estructuras de datos grandes. Úselo solo cuando sea necesario y tenga cuidado con las implicaciones de rendimiento.
Pensé que solo necesitaba ver el valor (ya que se calcula currentRecord ):
watch(currentRecord.value, () => { //... })