Javascript object keys with spaces

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?

Is there any good reason for using a property name with spaces? Why not just use a `name_with_underscore` or `camelCase`? — matt_jay, Nov 22 '15 at 13:42
Well I wanted the column header name to have a space. But I suppose I could store the column header names in a separate object and access them using name_with_underscore as the key — greenerr, Nov 22 '15 at 13:46

score 2 · Accepted Answer · answered Nov 22 '15 at 13:54

2

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

answered Nov 22 '15 at 13:54

Almis

3,684
2
28
58

This works, thanks. I guess like codejak suggested I shouldn't be using property names with spaces, it makes more sense to name them properly and then worry about how to display them after. – greenerr Nov 22 '15 at 14:02

Pantelis Peslis · Answer 2 · 2015-11-22T22:12:25.903

2

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.

edited Nov 22 '15 at 22:12

answered Nov 22 '15 at 21:51

Pantelis Peslis

14,930
5
44
45

The direction functionality is not working. It seems like the brackets notation in vue's expressions only works for variables, as opposed to properties. – Matanya May 07 '16 at 19:26

score 1 · Answer 3 · edited May 23 '17 at 11:52

1

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.

edited May 23 '17 at 11:52

Community

1
1

answered Nov 22 '15 at 13:49

matt_jay

1,241
1
15
33

Thanks, you're right it makes more sense to name them properly. I think I will either store them in a separate array, or change the output using javascript like Almis suggested. – greenerr Nov 22 '15 at 14:04

Javascript object keys with spaces

3 Answers3