将道具传递给模态形式，更新，使用 Composition api Vue 3 提交

Question

我通过

从parent获得道具

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

然后我常量分配给 vModel，以便能够 write/change 数据，因为 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" />

我想通过 Props 填充表单，然后通过 v-model

更新它们

我想知道如何创建一个 crud 并将道具传递给模态以进行编辑。

编辑 2：

我尝试添加到 ref()

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 不能像 props.foo = 那样浅修改，也不应该像 props.foo.bar = 这样深修改。唯一合适的方法是向父组件发送一个事件，其中存在通过 prop 传递的值，因此它可以为子组件修改它。这就是v-model does.

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

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 也会导致错误.

将道具传递给模态形式，更新，使用 Composition api Vue 3 提交

Pass props to modal form, update, submit with Composition api Vue 3

vue.js

vuejs3