将道具传递到模态表单，更新，使用CompositionapiVue3提交

Question

我用从父级获得道具

const props = defineProps<{
customer: Customer
}>()

然后我将const分配给vModel，以便能够写入/更改数据，因为props是只读的。

model = useVModel(props, 'customer')

然后在表格上我使用

<input v-model="model.name" type="text" class="input" />

我只想修改props中的数据，并将它们put到api中。

简单的积垢。编辑：

因为我不能：

<input v-model="model.name" :value="model.name" type="text" class="input" />

我想通过道具填充表单，然后通过v模型更新它们

我正试图弄清楚，如何创建一个crud并将道具传递给modal进行编辑。

编辑2:

我试着添加到参考((

let formData = ref({
customer: {
name: props.customer.name,
department: props.customer.department,
},
})

这样我就可以使用

<input v-model="formdata.customer.name" type="text" class="input" />

但我得到了：

EditCustomer.vue:66 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')

Answer 1

道具不能像props.foo =那样修改得浅，也不应该像props.foo.bar =那样修改得深。唯一合适的方法是将事件发送到存在通过道具传递的值的父组件，这样它就可以为子组件修改它。这就是v-model的作用。

useVModel(props, 'foo')函数不可能被编写成这样工作，因为它提供的参数只允许修改只读的props.foo。为了使其工作，useVModel需要实现双向绑定，因此具有更新值的事件可以在父级中更改，因此它需要能够发送事件。这是文档列出的内容：

const data = useVModel(props, 'data', emit)
console.log(data.value) // props.data
data.value = 'foo' // emit('update:data', 'foo')

ref的例子不起作用，因为props.customer.name是在设置函数内直接访问的，这破坏了反应性，也导致了props.customer === undefined的错误。