I'm playing around with the vue.js library, and I'm trying to make a change to the grid ponent example located here: .html

The sorting breaks when I add a space to one of the column names. See here: /

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?

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

The sorting breaks when I add a space to one of the column names. See here: http://jsfiddle/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?

• javascript
• vue.js

Share Improve this question Follow asked Nov 22, 2015 at 13:40 greenerrgreenerr 11933 silver badges1010 bronze badges 2

• Is there any good reason for using a property name with spaces? Why not just use a name_with_underscore or camelCase? – 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 Commented Nov 22, 2015 at 13:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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

You should surround the sortKey with square brackets,

orderBy [sortKey] sortOrders[sortKey]

http://jsfiddle/9d1f0858/2/

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

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 ment.

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.