Vue中如何使用带空格的JSON键？无法修改JSON文件的解决方案

为什么之前的写法跑不通 #

JS的点号属性访问语法，要求后方的属性名必须是合法标识符：不能以数字开头、不能包含空格或特殊符号。你用的company.52 Week High完全不符合这个规则，Vue模板在编译阶段就会抛出语法错误，自然没法正常取值。

正确的实现方式 #

• 模板里直接用方括号语法访问：方括号里可以接收任意字符串形式的键名，不受标识符规则限制，直接写成：

  <li>{{ company['52 Week High'] }}</li>
  

  一定要注意方括号里的键名要加引号（单双引号都行），不然会被当成未定义的JS变量解析，还是会报错。
• 如果这个属性要在模板里多次用到，可以在组件的计算属性里提前映射成合法的属性名，简化写法：

  // 组件script部分的计算属性配置
  computed: {
    weekHigh52() {
      // 方括号传字符串的方式取值
      return this.company['52 Week High']
    }
  }
  

  之后模板里就可以直接用简化后的名字渲染，不用每次写长串的带空格键名：

  <li>{{ weekHigh52 }}</li>
  

补充说明 #

这个取值方式是原生JS对象访问的通用规则，不是Vue特有的写法——不管什么框架，只要访问的对象键是带空格、数字开头、含特殊符号的格式，都可以用方括号传字符串的方式取值，不用修改原JSON结构。

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