作者:快乐天使小可爱66 | 来源:互联网 | 2023-10-11 20:59
假设created时请求getForm(),得到form:{head:{},main:{},footer:{}}页面有三个区域,分别需要form.head,form.main.f
假设created时请求getForm(),得到
form:{head:{},main:{},footer:{}}
页面有三个区域,分别需要form.head,form.main.form.footer数据
另外每个区域都提供了编辑功能,应该如何实现?
解决这个问题,实现上有二个注意点:
1,把数据分块,一般用到computed:{}
2, 编辑功能,一般需要一个临时变量
遇到的困难: computed默认只有get ,
手敲的伪代码如下:
data(){return { form:null}}
created(){this.getForm(() =>this.form = res .form)}
computed:{
head(){
return this.form.head
}
如果只用get的话,意味着这个数据只能用来展示。不符合要求!
启用set的话,如下:
computed:{
head:{
1 2
| get(){ return this.form.head}
set(v){this.form.head = v} |
}
}
乍看没有问题,继续……
接下来处理编辑功能,
点编辑时,需要把head放到一个临时对象tempHead里,相应地需要template也用tempHead变量来渲染,为什么呢,
第一点,分割数据才使用到computed的head,
第二点,因为我们的head是一个对象,而对象是可以用v-model直接修改内部属性的值,而我们需要在保存时才修改其值,所以需要临时变量,那么把临时变量定义在data还是computed?
答案是都可以!
我们知道,一个computed值想支持修改,那么必须定义set方法,v-model也会触发set ,所以可以set一个空函数,只在点保存时,把tempHead赋值给head,保存时的赋值操作不会触发set(这里好像是废话,哈哈哈)。另外使用computed,vue会帮我们执行get,也就是说点编辑时的赋值操作是多余的,
乍看没有问题,但我思维不够严谨,可能考虑不周,如有漏洞,希望同行指点。感谢
用户修改时,只修改临时对象,
点保存时,把临时变量的值赋值给head,赋值操作会触发computed中head的set方法,完成!!!
插一句,
我们的赋值操作由点击事件触发,适用于编辑页面跟列表页面不在同一屏显示,比如模态框,
假如不在同一屏,页面初始时就需要赋值,比如行内编辑,那么在getForm的回调里,tempHead=res.head就行,这里发散一下思维,如果获取的form是一个数组,对应到布局,就是table的行内编辑,只需要temp每一行,那么页面初始化时直接用res.list就行,比如有一个输入框绑定{{row.name}}点击编辑时,需要显示临时变量,这里怎么用临时变量替换row.name呢???
因为思维不够严谨,所以一个观点反复强调,希望不影响阅读?