Vue 3，Composition Api 在“反应式”上的双向数据绑定无法正常工作

Question

我是vue 3 的新成员，正在尝试进行两个数据绑定，但它无法正常工作。我做了setup() 并创建了一个reactive 数据。通过v-model 将其绑定到孩子。然后 $emit 更新的数据返回给父级。但是父母的reactive 数据没有应用，直到代码在保存命令上重新运行。

父脚本：

    export default defineComponent({
      setup(){
        const activeCard = reactive({id:null, travelType:null})
        return {activeCard}
      },
    })

父模板：

    <pin-card v-for="(pinCard, idx) in categoryPinCards"
              :key="idx"
              v-model="activeCard"
              :pinCard="pinCard"></pin-card>

子脚本

    export default defineComponent({
      props:{
        modelValue:Object,
      },
      methods:{
        makePinActive(id:number, travelType:null) {
          this.$emit("update:modelValue", {id: id, travelType: travelType})
        },
      }
    })

我按照步骤进行了，但是缺少什么？

Answer 1

v-model 在 Vue 3 中似乎无法使用 reactive 道具（而 refs 没有这个问题）。

一种解决方法是为update:modelValue 事件添加一个处理程序，即Object.assigns 新值：

<pin-card
    v-for="(pinCard, idx) in categoryPinCards"
    :key="idx"
    :modelValue="activeCard" ?
    @update:modelValue="setActiveCard($event)" ?
    :pinCard="pinCard"
></pin-card>

export default {
  setup() {
    return {
      //...
      setActiveCard(eventData) {
        Object.assign(activeCard, eventData)
      }
    }
  }
}

demo