欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 对象属性的监听

程序员文章站 2022-05-17 20:05:00
...
  watch: {
            'formkc.courseid': {
                handler: function (newVal, oldVal) {
                    if (this.formkc.courseid) {
                        if (this.$refs.course) {
                            var items = this.$refs.course.getData();
                            for (i = 0; i < items.length; i++) {
                                var item = items[i];
                                if (item.id == this.formkc.courseid) {
                                    this.formkc.xuefen = item.xuefen == 0 ? '' : item.xuefen;
                                    this.formkc.zongxueshi = item.zongxueshi == 0 ? '' : item.zongxueshi;
                                    this.formkc.jiangshou = item.jiangshou == 0 ? '' : item.jiangshou;
                                    this.formkc.keneishijian = item.keneishijian == 0 ? '' : item.keneishijian;
                                    this.formkc.shiyan = item.shiyan == 0 ? '' : item.shiyan;
                                    this.formkc.shixun = item.shixun == 0 ? '' : item.shixun;
                                    this.formkc.shixi = item.shixi == 0 ? '' : item.shixi;
                                    this.formkc.qitashijian = item.qitashijian == 0 ? '' : item.qitashijian;
                                    this.formkc.comment = item.comment;
                                    this.formkc.xueqi = item.xueqi;
                                    break;
                                }
                            }
                        }
                    }
                }
            },
            formkc: {
                deep: true,
                handler: function (newval, oldval) {
                    this.formkc.zongxueshi = Number(this.formkc.jiangshou)
                                              + Number(this.formkc.keneishijian)
                                              + Number(this.formkc.shiyan)
                                              + Number(this.formkc.shixun)
                                              + Number(this.formkc.shixi)
                                              + Number(this.formkc.qitashijian);
                }
            }
        }

这个监听了formkc对象,和对象中courseid值的变化,courseid绑定了一个课程选择框
实现的功能是:
1、courseid变化后,其对应记录中的学分、学时等相关属性给formkc中的对应属性赋值。
2、当formkc中的讲授学时、课内实践学时等发生改变时,计算出总学时。