Vue 3，组合 Api 'reactive' 上的双向数据绑定无法正常工作

Question

我是 vue 3 的新手，正在尝试绑定两个数据，但无法正常工作。我做了 setup() 并创建了 reactive 数据。通过 v-model 将其绑定到 children。然后将更新后的数据 $emit 返回给 parent。但是 parent 的 reactive 数据未应用到保存命令上的代码 re-run。

parent 脚本：

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

parent 模板：

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

child 脚本

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

我按照步骤操作了，但是，缺少什么？

Answer 1

似乎 reactive 道具不能被 v-model 在 Vue 3 中使用（而 ref 没有这个问题）。

解决方法是为 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

Vue 3，组合 Api 'reactive' 上的双向数据绑定无法正常工作

Vue 3, Composition Api two way data binding on 'reactive' not working correctly

vuejs3

vue-composition-api