Javascript 带空格的对象键

Question

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

当我向其中一个列名称添加 space 时，排序中断。看这里：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 过滤器中使用 space 有关。所以它必须在这里中断：

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

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

Answer 1

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

使用不会像我在评论中建议的那样导致这些问题的名称。

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

您甚至可以深入研究 in this thread 中描述的方法。虽然这已经再次造成限制。

Answer 2

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

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

这里正在工作jsfiddle

Answer 3

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

orderBy [sortKey] sortOrders[sortKey]

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

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

Javascript 带空格的对象键

Javascript object keys with spaces

javascript

vue.js