用空格

我玩弄了vue.js庫，我試圖做出改變，以設在這裏的網格組件例如Javascript對象鍵：http://vuejs.org/examples/grid-component.html 用空格

排序休息時，我添加一個空格到其中一個列名稱。在這裏看到：http://jsfiddle.net/greene48/9d1f0858/

列名被通過sortBy功能，更新SORTKEY變量是列名過去了，切換相應的sortOrders關鍵是-1或1

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

有誰知道爲什麼這不起作用？當我檢查sortKey和sortOrders [key]的值時，它們似乎正確更新。我認爲它必須與不能在內置的Vue.js orderBy過濾器中使用空間有關。所以它必須在這裏打破：

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

但我沒有看到任何關於如何解決這個問題的Vue.js文檔。有人有主意嗎？

來源

2015-11-22 greenerr

是否有任何充分的理由使用空間屬性名稱？爲什麼不使用'name_with_underscore'或'camelCase'？ –

那麼我想要列標題名稱有一個空格。但我想我可以將列標題名稱存儲在單獨的對象中，並使用name_with_underscore作爲密鑰來訪問它們。 – greenerr

一個簡單的辦法是用power_value替換鍵power value，然後使用純JavaScript這樣

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

這裏Vue的渲染後手動更改頭工作jsfiddle

來源

2015-11-22 13:54:25 Almis

這工作，謝謝。我想像codejak建議我不應該使用屬性名稱與空格，它更有意義，正確命名它們，然後擔心如何顯示它們之後。 – greenerr

我會建議不要讓你的屬性名稱依賴於你希望他們在你的前端呈現的方式。

使用不會導致這些問題的名稱，正如我在我的評論中所建議的那樣。

您將這些名稱映射到輸出值的想法聽起來很合理。

你甚至可以看看in this thread描述的方法。儘管這已經造成了限制。

來源

2015-11-22 13:49:58

謝謝，您是對的，正確命名它們會更有意義。我想我會將它們存儲在單獨的數組中，或者使用像Almis建議的那樣使用JavaScript來更改輸出。 – greenerr

您應環繞sortKey帶方括號，

orderBy [sortKey] sortOrders[sortKey]

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

但是，我同意上面所說的，以避免使用帶有空格的屬性名稱。

來源

2015-11-22 21:51:44

方向功能不起作用。看起來vue表達式中的括號符號只適用於變量，而不是屬性。 – Matanya

回答

相關問題