响应式对象添加 响应式属性的三种方式；响应式对象添加属性后页面不更新

目录

一、问题

二、解决方法

三、总结

---

一、问题

1.一个表单里有由上下两部分组成：在未归档时，上面一部分数据baseMsg有些可以编辑，有些不可以编辑，下面一部分数据inhospital不可以编辑；在归档后全部不可以编辑，可以用一个type值来标识每个字段是否可以编辑；。

有两种解决方法：

1）初始化的时候就给每个字段加上一个type属性和初始化值。可以实现，但是对于未归档时下面一部分数据都不可以编辑和归档后全部不可以编辑这两种情况而言，每个字段都添加type显然是冗余的。

2）考虑在初始化每个字段值时，循环添加type。可以减少下面一部分数据手动添加type。但是遇到了问题：添加了type属性后，对象里也添加了对应的值，但是页面不按照预期显示：在未归档时不可以编辑的部分仍然可以编辑，归档时和未归档时显示的完全一样。

二、解决方法

表单数据 patientInfo结构如下：

    const patientInfo = reactive({
      baseMsg: {
        title: '基本信息',
        inputContent: {
          patientname: {
            label: '姓名',
            type: 'textarea',
            maxlength: 30,
            value: ''
          },
          gender: {
            label: '性别',
            type: 'radio',
            value: '',
            radios: [
              {
                label: '男',
                value: 1
              },
              {
                label: '女',
                value: 2
              },
              {
                label: '其他',
                value: 0
              }
            ]
          },
          height: {
            label: '身高',
            type: 'input',
            isNumber: true,
            value: ''
          },
          weight: {
            label: '体重',
            type: 'input',
            isNumber: true,
            value: ''
          },
          mobile: {
            label: '手机号',
            type: 'input',
            isNumber: true,
            value: ''
          },
          age: {
            label: '年龄',
            type: 'disabled',
            value: ''
          },
          bloodtype: {
            label: '血型',
            type: 'disabled',
            value: ''
          },
          idcard: {
            label: '身份证号码',
            type: 'disabled',
            value: ''
          },
          borntime: {
            label: '出生日期',
            type: 'disabled',
            value: ''
          },
        }
      },
      inhospital: {
        title: '住院信息',
        inputContent: {
          inpatientid: {
            label: '住院号码',
            // type:'',
            value: ''
          },
          roomname: {
            label: '病房号',
            value: ''
          },
          bedname: {
            label: '床号',
            value: ''
          },
          nursename: {
            label: '责任护士',
            value: ''
          },
          actionsdoctorname: {
            label: '主治医生',
            value: ''
          },
          departmentname: {
            label: '所在科室',
            value: ''
          },
          entryhospital: {
            label: '入院时间',
            value: ''
          },
          inhosdays: {
            label: '住院天数',
            value: ''
          },
          operationdays: {
            label: '手术天数',
            value: ''
          },
          leavehospital: {
            label: '出院日期',
            value: ''
          },
          isfasting: {
            label: '禁食',
            value: ''
          },
          isolation: {
            label: '隔离',
            value: ''
          },
          criticallevel: {
            label: '病情',
            value: ''
          },
          diagnosis: {
            label: '主要诊断',
            value: ''
          }
        }
      }
    });

1.通过console.log打印发现，我 直接用obj.type='disabled循环添加的 type不是响应式的(对象的原型链上没对应的有 get/set方法)。

1）代码如下

    const initData = () => {
      for (let item in patientInfo) {
        let temp = patientInfo[item].inputContent;
 
        for (let key in temp) {
          if (isShowSave) {
            switch (item) {
              // 住院信息全部不可编辑
              case 'inhospital':
                // 非响应式数据不可以
                temp[key].type = 'disabled';
 
                // 下面两个都可以
                // temp[key] = Object.assign({}, temp[key], { type: 'disabled' });
                // _this.$set(temp[key],'type','disabled')
                console.log("patientInfo",patientInfo)
                break;
              default:
                break;
            }
          }
          // 已归档患者全部不可编辑
          else {
            temp[key] = Object.assign({}, temp[key], { type: 'disabled' });
          }
          switch (key) {
            case 'criticallevel':
              temp[key].value = currentOperaMsg['criticallevelvalue']
                ? currentOperaMsg['criticallevelvalue']
                : emptyValue;
              break;
            case 'gender':
              temp[key].value = currentOperaMsg['genderKey'];
              break;
            default:
              temp[key].value = currentOperaMsg[key];
              // 不可编辑且为空值的填充 默认值
              if (!currentOperaMsg[key] && temp[key].type === 'disabled') {
                temp[key].value = emptyValue;
              }
              break;
          }
        }
      }
    };

2）结果：type变量不是响应式的

 

2.使用

a. obj=Object.assign({},obj,{type:'disabled'})

b. this.$set(obj,'type','disabled')

c.obj.type='disabled';  obj=JSON.parse(JSON.stringify(obj);

1)代码如下

    const initData = () => {
      for (let item in patientInfo) {
        let temp = patientInfo[item].inputContent;
 
        for (let key in temp) {
          if (isShowSave) {
            switch (item) {
              // 住院信息全部不可编辑
              case 'inhospital':
                // 非响应式数据不可以
                // temp[key].type = 'disabled';
 
                // 下面两个都可以
                temp[key] = Object.assign({}, temp[key], { type: 'disabled' });
                // _this.$set(temp[key],'type','disabled')
                console.log("patientInfo",patientInfo)
                break;
              default:
                break;
            }
          }
          // 已归档患者全部不可编辑
          else {
            temp[key] = Object.assign({}, temp[key], { type: 'disabled' });
          }
          switch (key) {
            case 'criticallevel':
              temp[key].value = currentOperaMsg['criticallevelvalue']
                ? currentOperaMsg['criticallevelvalue']
                : emptyValue;
              break;
            case 'gender':
              temp[key].value = currentOperaMsg['genderKey'];
              break;
            default:
              temp[key].value = currentOperaMsg[key];
              // 不可编辑且为空值的填充 默认值
              if (!currentOperaMsg[key] && temp[key].type === 'disabled') {
                temp[key].value = emptyValue;
              }
              break;
          }
        }
      }
    };

2)结果：type变量变成响应式的，页面也正常显示不可编辑的状态

 

三、总结

1.添加响应式属性的方法

  a. obj=Object.assign({},obj,{attributeName:'value}）

  b. this.$set(obj,'attributeName','value');

  c. obj.attributeName=value;obj=JSON.parse(JSON.stringify(obj))

  注：其中a,c都是手动生成了一个新的对象，然后赋值给原对象

         b是 vue 内部提供的给对象添加 响应式属性的方法。

/*

希望对你有帮助！

如有错误，欢迎指正，非常感谢！

*/