如何在 Vue 3 组合 API 中使用计算方法更正设置 v-model？答案

【问题标题】：How to correct set v-model with computed method in Vue 3 Composition API?如何在 Vue 3 组合 API 中使用计算方法更正设置 v-model？
【发布时间】：2021-07-19 07:24:08
【问题描述】：

我有一个组件：

<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 值？我想以两种方式使用组件 - 有道具和没有道具。感谢您的帮助。

【问题讨论】：

标签： vue.js vuejs3 vue-composition-api

【解决方案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

【讨论】：