如何在 Vue 3 Composition API 中使用计算方法更正集合 v-model？

Question

我得到了一个组件：

<template>
  <input type="text" v-model="customerComponentModel" />
</template>
<script>
import { computed } from 'vue';
export default {
  props: {
    modelValue: Object,
  },
  setup(props, { emit }) {
    const customerComponentModel = computed({
      get: () => {
      if (props.modelValue) {
          return props.modelValue.Customer
        } else {
          return ''
        }
      },
      set: (value) => {
           ????
    });

    return { customerComponentModel };
  },
};
</script>

如果我通过 modelValue 向它发送数据，这个组件工作正常。如果 props.modelValue 未在父级中设置，我如何设置 customerComponentModel 值？我想以两种方式使用组件——有道具和没有道具。感谢您的帮助。

Answer 1

使用新的对象值发出一个 update:modelValue 事件。要仅更新 Customer 字段，发出的值应该是 props.modelValue 的克隆以及等于新值的新 Customer 字段：

export default {
  props: {
    modelValue: Object,
  },
  setup(prop, { emit }) {
    const customerComponentModel = computed({
      //...
      set: (value) => {
        emit('update:modelValue', {
          ...props.modelValue,
          Customer: value,
        })
      }
    });

    return {
      customerComponentModel
    }
  }
}

demo

如何在 Vue 3 Composition API 中使用计算方法更正集合 v-model？

How to correct set v-model with computed method in Vue 3 Composition API?

vue.js

vuejs3

vue-composition-api