Javascript object keys with spaces

Question

I am playing with the vue.js library, and I am trying to make a change to the grid component example located here: http://vuejs.org/examples/grid-component.html

Sorting is interrupted when I add a space to one of the column names. See here: http://jsfiddle.net/greene48/9d1f0858/

The column name is passed through the sortBy function, which updates the sortKey variable, which is the column name, and switches the corresponding sortOrders key to -1 or 1.

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

Does anyone know why this is not working? When I check the values ​​of sortKey and sortOrders [key], they seem to be updated correctly. I think this should have something to do with not using the space in the built-in order in Vue.js. Therefore, it should break here:

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

But I don't see anything in the Vue.js docs on how to fix this. Does anyone have any idea?

Answer 1

One simple fix would be to replace the key power valuewith power_value, and then change the title manually after rendering Vue using pure javascript like this

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

Jsfiddle works here

Answer 2

, , .

, , .

.

. .

Answer 3

You must surround with sortKeysquare brackets,

orderBy [sortKey] sortOrders[sortKey]

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

However, I agree with the above to avoid using property names with spaces.