VueJS动态变量赋值问题：替代多分支判断实现属性赋值

嘿，我来帮你搞定这个问题！你之前用this.window[name]报错的原因很直白：Vue组件实例的this指向的是组件本身，和全局的window对象完全不是一回事，所以this.window会返回undefined，自然就没法给它的属性赋值啦。

正确的实现方式 #

你只需要直接通过this[name]来访问和赋值组件的data变量就行——因为你在data选项里定义的所有变量，最终都会挂载到组件实例（也就是this）上。

基础版代码示例

export default {
  data() {
    return {
      resData: {},
      datData: {},
      // 其他需要的变量...
    };
  },
  methods: {
    chgValue(name) {
      // 可选：先校验属性是否存在，避免误操作不存在的属性
      if (this.hasOwnProperty(name)) {
        this[name] = 1; // 替换成你需要的赋值内容
      } else {
        console.warn(`组件中不存在名为 ${name} 的属性哦`);
      }
    }
  }
}

进阶版：多属性对应不同赋值逻辑

如果不同变量需要不同的赋值内容，用对象映射替代冗长的if-else会更简洁易维护：

export default {
  data() {
    return {
      resData: {},
      datData: {},
      // 其他变量...
    };
  },
  methods: {
    chgValue(name) {
      // 定义每个属性对应的赋值内容或逻辑
      const valueMapping = {
        resData: 1,
        datData: { key: 'new value' },
        // 其他属性的赋值规则...
      };

      if (valueMapping.hasOwnProperty(name)) {
        this[name] = valueMapping[name];
      } else {
        console.warn(`未配置属性 ${name} 的赋值规则`);
      }
    }
  }
}

额外小提醒 #

• 要是你用的是Vue 3的<script setup>语法，变量是用ref/reactive定义的，建议把变量统一放到一个对象里管理，比如const state = { resData: ref({}), ... }，然后通过state[name].value = xxx来动态赋值。
• 加上属性存在性校验能有效避免传错属性名导致的意外bug，很实用哦。

内容的提问来源于stack exchange，提问作者hatched