Vue.js方法中如何用变量作为对象属性名重构代码？

嘿，这个问题我太懂啦！你现在踩的是JavaScript对象属性命名的一个小坑——直接写{ element: this.element }的话，对象的键会被当成字符串"element"，而不是你变量element的实际值（也就是"name"）。要实现你想要的动态替换效果，得用计算属性名或者先创建对象再赋值的方式，具体看下面两种方案：

方案一：ES6计算属性名（推荐） #

这是最简洁的写法，直接在对象里用方括号把变量包起来，JS就会把变量的值作为对象的键：

if (element === 'name') { 
  const address_data = { [element]: this[element] };
}

这里的[element]会被解析成变量element的当前值（比如"name"），this[element]则等价于this.name，完美实现你要的替换效果~

方案二：先创建对象再动态赋值（兼容旧环境） #

如果你的项目需要兼容不支持ES6的环境，可以用这种传统写法：

if (element === 'name') { 
  const address_data = {};
  address_data[element] = this[element];
}

先初始化一个空对象，再通过方括号语法给它添加动态属性，效果和第一种完全一样。

另外提一句：建议把==换成===哦，避免隐式类型转换带来的意外问题，这也是JS开发的最佳实践之一~

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