gpt4 book ai didi

javascript - 如何重构重复的条件 Vue.js 代码?

转载 作者:搜寻专家 更新时间:2023-10-30 22:53:02 25 4
gpt4 key购买 nike

我的 Vue.js 组件中有这段代码:

mounted() {
if (localStorage.dobDate) {
this.form.dobDate = localStorage.dobDate;
}

if (localStorage.dobMonth) {
this.form.dobMonth = localStorage.dobMonth;
}

if (localStorage.dobYear) {
this.form.dobYear = localStorage.dobYear;
}
},

watch: {
"form.dobDate": {
handler: function(after, before) {
localStorage.dobDate = after;
},
deep: true
},
"form.dobMonth": {
handler: function(after, before) {
localStorage.dobMonth = after;
},
deep: true
},
"form.dobYear": {
handler: function(after, before) {
localStorage.dobYear = after;
},
deep: true
}

问你会发现它会变得非常重复,例如,如果我有一个大表格,我不想对每个字段都这样做。有什么方法可以使它更干吗?例如,有没有一种方法可以使表单中的任何字段更具动态性?

最佳答案

在挂载的钩子(Hook)中创建一个 localStorage 字段数组 ["dobDate","dobMonth","dobYear"] 并使用 forEach 方法遍历它,对于每个字段 localStorage[fieldName ] 检查它是否使用 conditional operator 定义,如果已定义,则将其分配给 form 数据属性中的相应字段名称,否则传递给下一个元素:

mounted(){
["dobDate","dobMonth","dobYear"].forEach(field=>{

localStorage[field]?this.form[field]=localStorage[field]:{};

})

}

watch 属性中深入观察 form 对象(观察它的嵌套字段),然后通过执行在 mounted 钩子(Hook)中进行的相互操作循环遍历它的键:

 watch: {
form: {
handler: function(after, before) {
Object.keys(after).forEach(key=>{
localStorage[key]=after[key]
})
},
deep: true
}
}

关于javascript - 如何重构重复的条件 Vue.js 代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57709947/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com