• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

201
Vistas
La emisión secundaria no actualiza la matriz v-model prop de los padres

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.

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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.

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda