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
– matt_jay, Commented Nov 22, 2015 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
– greenerr, Commented Nov 22, 2015 at 13:46

Almis · Accepted Answer · 2015-11-22 13:54:25Z

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, 2015 at 13:54

Almis

3,8292 gold badges31 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

greenerr Over a year ago

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.

pespantelis · Accepted Answer · 2015-11-22 22:12:25Z

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, 2015 at 22:12

answered Nov 22, 2015 at 21:51

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

1 Comment

Matanya Over a year ago

The direction functionality is not working. It seems like the brackets notation in vue's expressions only works for variables, as opposed to properties.

Community · Accepted Answer · 2017-05-23 11:52:41Z

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, 2017 at 11:52

CommunityBot

11 silver badge

answered Nov 22, 2015 at 13:49

matt_jay

1,2611 gold badge16 silver badges34 bronze badges

1 Comment

greenerr Over a year ago

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.

Collectives™ on Stack Overflow

Javascript object keys with spaces

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related