Struggling to implement Vue3 two-way binding with v-model, but my emit() isn't updating the parent value. Any idea where I might be going wrong? Much appreciated!
This is what the parent component looks like:
<template>
<div class="card">
<LearnersTable
v-model:toActivate="toActivate"
/>
<!-- Check if this is updated -->
{{ toActivate.length }}
</div>
</template>
<script setup>
[...]
// List of people to activate
const toActivate = [];
</script>
And here's how the children component (LearnersTable) is structured:
<template>
[...]
<tr v-for="row in rows" :key="row.id" > ;
<span>
<Toggle v-model="row.enabled" @change="onChangeActivate(row)"/>
</span>
</tr>
[...]
</template>
<script setup>
const props = defineProps({
toActivate: {
type: Array,
default: () => [],
},
});
const emit = defineEmits(['update:toActivate']);
const {
toActivate,
} = toRefs(props);
function onChangeActivate(row) {
if (row.enabled === true) {
toActivate.value.push(row);
}
emit('update:toActivate', toActivate.value);
}
</script>
I've left out some code snippets, but the main issue is that my emit doesn't seem to work correctly, resulting in the toActivate value not being updated in the parent.
Appreciate any insights you may have!