带空格的 Javascript 对象键答案

【问题标题】：Javascript object keys with spaces带空格的 Javascript 对象键
【发布时间】：2016-02-24 15:15:12
【问题描述】：

我正在使用 vue.js 库，我正在尝试对位于此处的网格组件示例进行更改：http://vuejs.org/examples/grid-component.html

当我向其中一个列名添加空格时，排序中断。见这里：http://jsfiddle.net/greene48/9d1f0858/

列名通过 sortBy 函数，该函数将 sortKey 变量更新为列名，并将适当的 sortOrders 键切换为 -1 或 1。

sortBy: function (key) {
      this.sortKey = key
      this.sortOrders[key] = this.sortOrders[key] * -1
    }

有谁知道为什么这不起作用？当我检查 sortKey 和 sortOrders[key] 的值时，它们似乎正在正确更新。我认为这一定与无法在内置的 Vue.js orderBy 过滤器中使用空格有关。所以它必须在这里打破：

<tr v-for="entry in data | filterBy filterKey | orderBy sortKey sortOrders[sortKey]">
        <td v-for="key in columns">
          {{entry[key]}}
        </td>
</tr>

但我在 Vue.js 文档中没有看到有关如何解决此问题的任何内容。有人有什么想法吗？

【问题讨论】：

是否有充分的理由使用带空格的属性名称？为什么不直接使用name_with_underscore 或camelCase？
我希望列标题名称有一个空格。但我想我可以将列标题名称存储在一个单独的对象中，并使用 name_with_underscore 作为键访问它们

标签： javascript vue.js

【解决方案1】：

我建议不要让您的属性名称取决于您希望它们在前端显示的方式。

按照我在评论中的建议，使用不会导致这些问题的名称。

您将这些名称映射到输出值的想法听起来很合理。

您甚至可以研究in this thread 描述的方法。虽然这已经再次产生了约束。

【讨论】：

谢谢，你说得对，正确命名它们更有意义。我想我要么将它们存储在一个单独的数组中，要么像 Almis 建议的那样使用 javascript 更改输出。

【解决方案2】：

一个简单的解决方法是将键 power value 替换为 power_value，然后在 Vue 渲染后使用像这样的纯 JavaScript 手动更改标题

document.querySelectorAll('#demo thead th')[1].textContent = 'Power value';

这里正在工作jsfiddle

【讨论】：

这行得通，谢谢。我猜想 codejak 建议我不应该使用带空格的属性名称，正确命名它们更有意义，然后担心之后如何显示它们。

【解决方案3】：

您应该用方括号将sortKey 括起来，

orderBy [sortKey] sortOrders[sortKey]

http://jsfiddle.net/9d1f0858/2/

但是，我同意上面所说的避免使用带有空格的属性名称。

【讨论】：

方向功能不起作用。似乎 vue 表达式中的括号符号仅适用于变量，而不是属性。