账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    计算属性如何生成编辑功能需要的临时变量
    23
    0

    假设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:{

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

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

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 煜珩 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部