In my current project, I have a main component called cms-custom-editor:
<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>
I am trying to send down the state.toggles as a prop to the child component called 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>
However, when using
emit('update:toggles', toggleAction)toggleAction to the parent and does not update the state.toggles array for subsequent actions.
After reading a response on this question, I attempted using ref instead of 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>
Unfortunately, this change did not solve the issue. The array is still only updated once and subsequent actions do not affect it. How can I fix this problem?
Edit:
I noticed that when I added additional non-array props to sibling elements within the child component, they were emitted correctly and triggered all actions associated with the array emit. It appears that the array data is stored inside the child component until an emit is triggered by a sibling element, which then sends the complete array to the parent. This behavior is quite puzzling to me.