Vueを勉強しています。
https://jp.vuejs.org/v2/examples/grid-component.html
公式にあるテーブルソートのサンプルを参考に、
入力フィールドの一覧を作成し、ソートするサンプルを作りました。
■事象
ヘッダークリック後、sortBy ⇒ filteredHeroesと動いてデータの表示順が変ります。
その状態で、Sortした列のデータを変更すると、再度filteredHeroesが実行され、並び順が変ってしまいます。
Sortをしていない列のデータを変更しても、filteredHeroesは動きません。
■質問1
上記事象についてcomputedを使用しているので、sort.sortKey、itemsに変更があったとき動くと考えています。
しかしSortを行っていない列のデータの場合、データを変更してもfilteredHeroesは動きません。なぜでしょうか。
■質問2
Sortした列のデータを変更しても、filteredHeroesを動かさないようにしたい場合はソースをどのように修正したら良いでしょうか。
現在の想定では、computedをやめて、methodsに移すしかないと考えています。
作成中のためうまくSortがされないことがありますが、filteredHeroesが動く事象は確認できます。
index.html
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 6</head> 7<body> 8 9<div id="demo"> 10 <table> 11 <thead> 12 <tr> 13 <th class="id" @click="sortBy('id')">ID</th> 14 <th class="comment" @click="sortBy('comment')">コメント</th> 15 </tr> 16 </thead> 17 <tbody> 18 <tr v-for="(item, idx) in filteredHeroes"> 19 <th><input type="text" value="1" v-model="item.id" ></th> 20 <td><input type="text" value="1" v-model="item.comment" ></td> 21 </tr> 22 </tbody> 23 </table> 24</div> 25<script> 26new Vue({ 27 el: '#demo', 28 data: { 29 items: [ 30 { "id": 1, "comment": "1行目" }, 31 { "id": 2, "comment": "2行目" } 32 ], 33 sort: { 34 sortKey: '', 35 sortOrders: {} 36 } 37 }, 38 computed: { 39 filteredHeroes: function () { 40 console.log('filteredHeroesが実行されます。'); 41 var sortKey = this.sort.sortKey; 42 var order = this.sort.sortOrders[sortKey] || 1; 43 var items = this.items; 44 if (sortKey) { 45 items = items.slice().sort(function (a, b) { 46 a = a[sortKey]; 47 b = b[sortKey]; 48 return (a === b ? 0 : a > b ? 1 : -1) * order; 49 }) 50 } 51 return items; 52 } 53 }, 54 mounted() { 55 this.sort.sortOrders["id"] = 1; 56 this.sort.sortOrders["comment"] = 1; 57 }, 58 methods: { 59 sortBy: function (key) { 60 console.log('sortByが実行されます。:' + key); 61 this.sort.sortKey = key; 62 this.sort.sortOrders[key] = this.sort.sortOrders[key] * -1; 63 } 64 } 65}); 66</script> 67</body> 68</html> 69コード
よろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。