女性门户网站模板,免费网站app软件,网站维护入门教程,自己做博客网站1. reactive
在做项目的时候通常会遇到这种情况#xff0c;比如我们有一个 Table 显示数据#xff0c;添加 Table 数据的时候使用 dialog 弹出#xff0c;在里面填写字段然后添加。
在 vue3 中#xff0c;对于对象的响应式定义推荐使用 reactive #xff0c;那么可以写入…1. reactive
在做项目的时候通常会遇到这种情况比如我们有一个 Table 显示数据添加 Table 数据的时候使用 dialog 弹出在里面填写字段然后添加。
在 vue3 中对于对象的响应式定义推荐使用 reactive 那么可以写入如下代码:
const dialogRuleForm reactive({title: ,status: ,author: ,
});2. 添加编辑功能
现在添加一个新功能编辑我希望添加和编辑使用同一个 dialog, 毕竟两者字段相同,使用数据赋值即可。
fetchApi({id: row.id})
.then((res) {dialogRuleForm res.data;
})会发现这样赋值不会产生效果那么怎么修改呢。
3. 修改
有三种方法
使用 ref把 reactive 改成 ref,如下
const dialogRuleForm ref({title: ,status: ,author: ,
});fetchApi({id: row.id})
.then((res) {dialogRuleForm.value res.data;
})千万别忘记ref 后面要用 .value, 建议使用 vscode 的 volar 插件勾选 ref sugar.
接着使用 reactive, 不过用一个 key 值代表如下
const dialogRuleForm reactive({value: {title: ,status: ,author: ,},
});fetchApi({id: row.id})
.then((res) {dialogRuleForm.value res.data;
})好像和 ref 在使用上没区别。
使用 Object.assign(), 如下
const dialogRuleForm reactive({title: ,status: ,author: ,
});fetchApi({id: row.id})
.then((res) {// 如果 res.data 是一个对象Object.assign(dialogRuleForm, res.data);// 如果 res.data 是一个数组Object.assign(dialogRuleForm, {...res.data});
})小技巧 如果使用同一个 dialog 组件当关闭 dialog 时需要清空组件内的数据如果你的字段过多就会变成如下情况
Object.assign(dialogRuleForm, {xxx: ,xxx: ,...
});这样写的很累我们可以在定义 reactive 数据的时候再定义一个 reset, 如下
使用的时候直接将这个空对象直接拷贝给新对象 相当于重置效果了
const resetForm reactive({ ...dialogRuleForm });这样清空数据的时候就可以这样使用
const resetForm reactive({title: ,status: ,author: ,
});
Object.assign(dialogRuleForm, resetForm);
