vue.js當排序網格只有值更新，而不是HTML

Question

我是Vue.js的新手，可以真正使用som的幫助。

我想在我的錶行上放置一個類（成功），以便根據Array（data）中每個對象中的屬性（狀態）的值爲它們提供背景顏色，該按照預期工作v-bind：類。

當我通過單擊表格標題排列表格行時出現問題。完成此操作後，彩色行與其內容之間會出現不匹配，就好像只更新了行的值，而不是行本身。

這裏試試：https://jsfiddle.net/Bayzter/cyv1o78s/

有誰知道如何解決這個問題，所以有色行再次與正確的對象匹配？

<script type="text/x-template" id="grid-template"> 
    <table> 
    <thead> 
     <tr> 
     <th v-for="key in columns" 
      @click="sortBy(key)" 
      :class="{active: sortKey == key}"> 
      {{key | capitalize}} 
      <span class="arrow" 
      :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"> 
      </span> 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr v-for=" 
     entry in data 
     | filterBy filterKey 
     | orderBy sortKey sortOrders[sortKey]" v-bind:class="{ 'success' : data[$index].status == 0}"> 
     <td v-for="key in columns"> 
      {{entry[key]}} 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</script> 

<!-- demo root element --> 
<div id="demo"> 
    <form id="search"> 
    Search <input name="query" v-model="searchQuery"> 
    </form> 
    <demo-grid 
    :data="gridData" 
    :columns="gridColumns" 
    :filter-key="searchQuery"> 
    </demo-grid> 
</div> 

Answer 1

如果你有

v-bind:class="{ 'success' : data[$index].status == 0}" 

你想

v-bind:class="{ 'success' : entry.status == 0}" 

$data[$index]不會引用當前訂單項，它會指向原始訂單項。 entry是當前項目。