He creado un modelo dinámico para filtrar en vue 3 y tengo algún problema al borrar (vaciar el objeto)
setup() { const model = ref({}); watch(model.value, (value) => { console.log("model changed"); console.log(model.value); }); const addLanguage = (language) => { model.value["meta_" + language.toLowerCase()] = language; }; const clear = () => { model.value = {}; }; return { addLanguage, clear, }; },También he creado una muestra aquí para probar https://codesandbox.io/s/mystifying-chebyshev-9tjogk?file=/src/App.vue
Agregando un nuevo elemento al modelo... el observador se activa... pero cuando borra el objeto (vacío), la función de observación ya no se activa.
¿Alguna idea de por qué?
La fuente de observación (es decir, model.value ) se reemplaza en clear() con un objeto vacío, por lo que el observador ya no se activa.
En lugar de desenvolver la referencia del model , pase la ref en sí misma como la fuente de vigilancia.
Pase la bandera deep al reloj para que se observe la adición/eliminación de propiedades.
watch( model, 1️⃣ (value) => { /* handle change */ }, { deep: true } 2️⃣ )