2017-10-15 165 views
-1

我正在玩數據網格組件,並添加了一個新列,名爲cool這是一個布爾值。防止Vue 2重新渲染數組?

現在,如果我想按此列進行排序,並且如果在排序後更改值(單擊「不是真」),它會立即對數據進行重新排序,使行切換到不合需要的位置(它應該只發生在另一次點擊)。

是否有可能防止立即排序/保持vue重新呈現表?

我也讀過一些地方,Vue不會按索引註冊更改數組,但由於某種原因它不會here

// register the grid component 
 
Vue.component('demo-grid', { 
 
    template: '#grid-template', 
 
    props: { 
 
    data: Array, 
 
    columns: Array, 
 
    filterKey: String 
 
    }, 
 
    data: function() { 
 
    var sortOrders = {} 
 
    this.columns.forEach(function (key) { 
 
     sortOrders[key] = 1 
 
    }) 
 
    return { 
 
     sortKey: '', 
 
     sortOrders: sortOrders 
 
    } 
 
    }, 
 
    computed: { 
 
    filteredData: function() { 
 
     var sortKey = this.sortKey 
 
     var filterKey = this.filterKey && this.filterKey.toLowerCase() 
 
     var order = this.sortOrders[sortKey] || 1 
 
     var data = this.data 
 
     if (filterKey) { 
 
     data = data.filter(function (row) { 
 
      return Object.keys(row).some(function (key) { 
 
      return String(row[key]).toLowerCase().indexOf(filterKey) > -1 
 
      }) 
 
     }) 
 
     } 
 
     if (sortKey) { 
 
     data = data.slice().sort(function (a, b) { 
 
      a = a[sortKey] 
 
      b = b[sortKey] 
 
      return (a === b ? 0 : a > b ? 1 : -1) * order 
 
     }) 
 
     } 
 
     return data 
 
    } 
 
    }, 
 
    filters: { 
 
    capitalize: function (str) { 
 
     return str.charAt(0).toUpperCase() + str.slice(1) 
 
    } 
 
    }, 
 
    methods: { 
 
    sortBy: function (key) { 
 
     this.sortKey = key 
 
     this.sortOrders[key] = this.sortOrders[key] * -1 
 
    } 
 
    } 
 
}) 
 

 
// bootstrap the demo 
 
var demo = new Vue({ 
 
    el: '#demo', 
 
    data: { 
 
    searchQuery: '', 
 
    gridColumns: ['name', 'power', 'cool'], 
 
    gridData: [ 
 
     { name: 'Chuck Norris', power: Infinity, cool: true }, 
 
     { name: 'Bruce Lee', power: 9000, cool: true }, 
 
     { name: 'Jackie Chan', power: 7000, cool: false }, 
 
     { name: 'Jet Li', power: 8000, cool: false } 
 
    ] 
 
    }, 
 
    methods: { 
 
    \t notTrue() { 
 
    \t this.gridData[0].cool = !this.gridData[0].cool; 
 
    } 
 
    } 
 
})
body { 
 
    font-family: Helvetica Neue, Arial, sans-serif; 
 
    font-size: 14px; 
 
    color: #444; 
 
} 
 

 
table { 
 
    border: 2px solid #42b983; 
 
    border-radius: 3px; 
 
    background-color: #fff; 
 
} 
 

 
th { 
 
    background-color: #42b983; 
 
    color: rgba(255,255,255,0.66); 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
td { 
 
    background-color: #f9f9f9; 
 
} 
 

 
th, td { 
 
    min-width: 120px; 
 
    padding: 10px 20px; 
 
} 
 

 
th.active { 
 
    color: #fff; 
 
} 
 

 
th.active .arrow { 
 
    opacity: 1; 
 
} 
 

 
.arrow { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: 5px; 
 
    opacity: 0.66; 
 
} 
 

 
.arrow.asc { 
 
    border-left: 4px solid transparent; 
 
    border-right: 4px solid transparent; 
 
    border-bottom: 4px solid #fff; 
 
} 
 

 
.arrow.dsc { 
 
    border-left: 4px solid transparent; 
 
    border-right: 4px solid transparent; 
 
    border-top: 4px solid #fff; 
 
}
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
 
<!-- component template --> 
 
<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 filteredData"> 
 
     <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> 
 
    
 
    <a @click="notTrue()">Not true</a> 
 
</div>

回答

0

計算變量的改變時重新計算。

因此,如果您不能重新計算filteredData當它改變時,你需要把filteredData數據

,並創建方法,使有序的數據,並把filteredData

,然後,當點擊時觸發該功能。

+0

我似乎不明白。你能否詳細說明一下? – Runnick