热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

计算属性如何生成编辑功能需要的临时变量

假设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呢???

因为思维不够严谨,所以一个观点反复强调,希望不影响阅读?


   



推荐阅读
  • Java容器中的compareto方法排序原理解析
    本文从源码解析Java容器中的compareto方法的排序原理,讲解了在使用数组存储数据时的限制以及存储效率的问题。同时提到了Redis的五大数据结构和list、set等知识点,回忆了作者大学时代的Java学习经历。文章以作者做的思维导图作为目录,展示了整个讲解过程。 ... [详细]
  • Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • 本文介绍了Redis的基础数据结构string的应用场景,并以面试的形式进行问答讲解,帮助读者更好地理解和应用Redis。同时,描述了一位面试者的心理状态和面试官的行为。 ... [详细]
  • JavaSE笔试题-接口、抽象类、多态等问题解答
    本文解答了JavaSE笔试题中关于接口、抽象类、多态等问题。包括Math类的取整数方法、接口是否可继承、抽象类是否可实现接口、抽象类是否可继承具体类、抽象类中是否可以有静态main方法等问题。同时介绍了面向对象的特征,以及Java中实现多态的机制。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 计算机存储系统的层次结构及其优势
    本文介绍了计算机存储系统的层次结构,包括高速缓存、主存储器和辅助存储器三个层次。通过分层存储数据可以提高程序的执行效率。计算机存储系统的层次结构将各种不同存储容量、存取速度和价格的存储器有机组合成整体,形成可寻址存储空间比主存储器空间大得多的存储整体。由于辅助存储器容量大、价格低,使得整体存储系统的平均价格降低。同时,高速缓存的存取速度可以和CPU的工作速度相匹配,进一步提高程序执行效率。 ... [详细]
  • Android JSON基础,音视频开发进阶指南目录
    Array里面的对象数据是有序的,json字符串最外层是方括号的,方括号:[]解析jsonArray代码try{json字符串最外层是 ... [详细]
  • 本文探讨了C语言中指针的应用与价值,指针在C语言中具有灵活性和可变性,通过指针可以操作系统内存和控制外部I/O端口。文章介绍了指针变量和指针的指向变量的含义和用法,以及判断变量数据类型和指向变量或成员变量的类型的方法。还讨论了指针访问数组元素和下标法数组元素的等价关系,以及指针作为函数参数可以改变主调函数变量的值的特点。此外,文章还提到了指针在动态存储分配、链表创建和相关操作中的应用,以及类成员指针与外部变量的区分方法。通过本文的阐述,读者可以更好地理解和应用C语言中的指针。 ... [详细]
  • 本文介绍了C++中省略号类型和参数个数不确定函数参数的使用方法,并提供了一个范例。通过宏定义的方式,可以方便地处理不定参数的情况。文章中给出了具体的代码实现,并对代码进行了解释和说明。这对于需要处理不定参数的情况的程序员来说,是一个很有用的参考资料。 ... [详细]
  • 本文讨论了为什么在main.js中写import不会全局生效的问题,并提供了解决方案。在每一个vue文件中都需要写import语句才能使其生效,而在main.js中写import语句则不会全局生效。本文还介绍了使用Swal和sweetalert2库的示例。 ... [详细]
  • 本文介绍了如何在给定的有序字符序列中插入新字符,并保持序列的有序性。通过示例代码演示了插入过程,以及插入后的字符序列。 ... [详细]
  • 本文介绍了Perl的测试框架Test::Base,它是一个数据驱动的测试框架,可以自动进行单元测试,省去手工编写测试程序的麻烦。与Test::More完全兼容,使用方法简单。以plural函数为例,展示了Test::Base的使用方法。 ... [详细]
  • 本文介绍了P1651题目的描述和要求,以及计算能搭建的塔的最大高度的方法。通过动态规划和状压技术,将问题转化为求解差值的问题,并定义了相应的状态。最终得出了计算最大高度的解法。 ... [详细]
  • 动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ... [详细]
author-avatar
快乐天使小可爱66
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有