Estoy empezando a aprender Vue y tengo dificultades para entender cómo definir accesorios, etc. usando la API de composición.
Tengo un componente (Editor ACE), cargado así:
<v-ace-editor v-model:value="currentRecord.text" /> El v-ace-editor necesita tener el modelo y el valor cargados así: v-model:value .
import {computed, ref} from 'vue'; import collect from "collect.js" const props = defineProps({ records: { type: Object, }, }) //Get all records. let getRecords = () => { return collect(props.records) } //Filter the records using "collect.js" const getUnlabeledRecords = () => { return getRecords() .where('skipped', false) .where('processed', false); } //Assign all unlabeled records on the first load. let allRecords = ref(getUnlabeledRecords()); //In order to check if "text" is empty - and if not, set a default value, load the first record into a temp. variable. let first = allRecords.value.first(); if(first){ first.text ??= ""; } //Load the current record into a ref. let current = ref(first); //Finally, compute it. let currentRecord = computed(() => current.value)Mirando esto, y viniendo de un fondo de back-end, se siente muy hinchado.
He probado lo siguiente:
let allRecords = ref(getUnlabeledRecords()); let currentRecord = computed(() => allRecords.value.first()) Pero hacer esto me lleva a no poder interactuar con el currentRecord ni cambiar todos los allRecords . Esto significa que si, por ejemplo currentRecord.text es null desde el backend, mi componente de editor as falla porque espera un valor.
¿Hay otra forma de cargar estas variables?
En realidad, no tiene que llamar .value de una referencia cuando lo usa en la plantilla. Entonces, puede eliminar la parte calculada (última línea de su) y cambiar su plantilla a.
<v-ace-editor v-model="current.text" />Ahora, suponiendo que administró v-model correctamente en v-ace-editor (si este es su propio componente), debería mantener la reactividad al modificar current.text desde v-ace-editor.
Como nota al margen, las propiedades calculadas son de solo lectura. No puede esperar que un componente secundario modifique su valor pasándolo con v-model.
Sin embargo, debe tener en cuenta que la actualización de registros prop desde el componente principal no actualizará el archivo . Para esto, tal vez desee agregar un observador en los registros .
Además, sugerencia personal, pero si realmente solo le importa el registro actual en su componente y no todos los registros, tal vez debería filtrar desde el componente principal y solo pasar el registro actual como accesorio. Otra sugerencia personal, puede declarar todas sus variables en su secuencia de comandos con const en lugar de let . const evita la reasignación, pero dado que trabaja con referencias, nunca lo reasigna, pero cambia su propiedad de valor .