带空格的Javascript对象键

Question

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

The sorting breaks when I add a space to one of the column names. See here: http://jsfiddle.net/greene48/9d1f0858/

The column name gets passed through the sortBy function, which updates the sortKey variable to be the column name, and toggles the appropriate sortOrders key to be either -1 or 1.

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

Does anyone know why this doesn't work? When I check the value of sortKey and sortOrders[key] they seem to be updating correctly. I think it must have something to do with not being able to use a space in the built in Vue.js orderBy filter. So it must 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. Anyone have any ideas?

Answer 1

One easy fix would be to replace key power value with power_value and then change the header manually after the Vue rendering using pure javascript like this

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

Here is working jsfiddle

Answer 2

I would suggest not making your property names dependent on the way you want them presented in your front end.

Use names that do not cause these issues as I suggested in my comment.

Your thought of mapping these names to an output value sounds reasonable.

You could even go as far as looking into the approaches described in this thread . Though that already creates constraints again.

Answer 3

You should surround the sortKey with square brackets,

orderBy [sortKey] sortOrders[sortKey]

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

However, I agree to the above said to avoid to use property names with whitespaces.