export default defineComponent({ props: { show: Boolean, book: Object, }, setup(props, context) { const editForm = reactive({ name: '', price: 0, publishDate: '', author: 0, classify: '', }); const close = () => { context.emit('update:show', false); }; watch(() => props.book, (current) => { Object.assign(editForm, current); editForm.publishDate = moment(Number(editForm.publishDate)); }); const submit = async () => { const res = await book.update({ id: props.book._id, name: editForm.name, price: editForm.price, author: editForm.author, publishDate: editForm.publishDate.valueOf(), classify: editForm.classify, }); result(res) .success(({ data, msg }) => { context.emit('update', data); message.success(msg); close();
时间: 2023-12-05 17:03:24 浏览: 84
reactive-props:数据和DOM模式的响应状态的多合一实现
这段代码使用了 Vue.js 的 Composition API,通过 reactive 函数创建了一个响应式对象 editForm,用于保存编辑图书时的表单数据。当 props.book 发生变化时,通过 watch 函数更新 editForm 对象的值,并将日期类型转换为 moment 对象。submit 函数用于提交表单数据,调用了 book.update 方法进行更新,同时处理更新成功或失败的结果并触发事件。close 函数用于关闭编辑弹窗。这段代码需要在父组件中传入一个 show 属性和一个 book 对象,以及触发 update 和 update:show 事件的方法。
阅读全文