Estoy usando este componente principal:
<template> <div id="cms-custom-editor" class="cms-custom-editor"> <cms-editor-toolbar v-model:toggles="state.toggles"/> <div class="content">Toggle Buttons: {{ state.toggles }}</div> </div> </template> <script setup> import CmsEditorToolbar from './cms-editor-toolbar.vue' import {reactive, ref} from "vue"; const state = reactive({ toggles: [], }) </script>
para pasar state.toggles
como accesorio al componente secundario cms-editor-toolbar
:
<template> <div id="cms-editor-toolbar" class="cms-editor-toolbar"> <button @click="toggleButton"></button> </div> </template> <script setup> const props = defineProps({ toggles: Array, }) const emit = defineEmits(['update:toggles']) const toggleButton = () => { // ... logic to determine toggleAction console.log(toggleAction) // logs correct toggleAction emit('update:toggles', toggleAction) //emits only first toggleAction and no other } </script>
Por alguna razón emit('update:toggles', toggleAction)
solo emite la primera toggleAction
al padre. Para cualquier otro cambio, la matriz state.toggles
no se actualiza.
De la respuesta en esta pregunta , he intentado usar ref
en lugar de reactive
:
<template> <div id="cms-custom-editor" class="cms-custom-editor"> <cms-editor-toolbar v-model:toggles="toggles"/> <div class="content">Toggle Buttons: {{ toggles }}</div> </div> </template> <script setup> import CmsEditorToolbar from './cms-editor-toolbar.vue' import {reactive, ref} from "vue"; const toggles = ref([1,2,3]) </script>
pero no cambia nada. Nuevamente, la matriz solo se actualiza una vez y ninguna acción consecutiva tiene ningún efecto. ¿Cómo hago que esto funcione?
Editar:
Agregué accesorios adicionales (no matrices) a los elementos hermanos dentro del elemento secundario, que no solo se emiten correctamente, sino que también activan todas las acciones de la array emit
. Básicamente, parece guardar la matriz dentro del elemento secundario hasta que la emisión se activa mediante una emisión hermana, que envía la matriz completa al elemento principal. No tengo idea de cómo está sucediendo esto.
He estado usando el método incorrecto para verificar si state.toggles
está actualizado. Representarlo en un párrafo generalmente funciona, pero en este caso no parece volver a representarse por ningún motivo.
Registrando la matriz dentro del padre así:
setInterval(function(){ console.log(state.toggles) }, 1000);
muestra que de hecho se está actualizando. Las emisiones están funcionando.