Vue 3: v-model and emit

Question

我试图使用Vue3与v-model的双向绑定，但我的emit()不更新父值。你能告诉我哪里错了吗?谢谢你！

父元素看起来像:

<template>
<div class="card">

<LearnersTable
v-model:toActivate="toActivate"
/>
<!-- To control if this is being updated -->
{{ toActivate.length }}

</div>
</template>

<script setup>
[...]
// List of person to activate
const toActivate = [];
</script>

And Children (LearnersTable)看起来像:

<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>

我省略了一些代码。但问题是，我的发射不工作，我没有得到toActivate值在父更新。

谢谢你!

Answer 1

试着让它反应:

<script setup>
import { ref } from 'vue';
// List of person to activate
const toActivate = ref([]);
</script>

和

<LearnersTable
v-model:to-activate="toActivate"
/>