Question

我正在使用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文档中看到有关如何解决这个问题的任何内容。有人有什么想法吗？

Answer 1

一个简单的解决方法是将密钥power value替换为power_value，然后在使用纯javascript进行Vue渲染后手动更改标头

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

这是有效的jsfiddle

Answer 2

我建议不要让你的属性名称依赖于你想要它们在前端呈现的方式。

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

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

你甚至可以调查所描述的方法in this thread。虽然这已经再次造成了限制。

Answer 3

您应该使用方括号

包围sortKey

orderBy [sortKey] sortOrders[sortKey]

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

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

带空格的Javascript对象键

3 个答案: