現在、基礎から学ぶVue.jsの書籍を見て勉強しています。
JavaScriptとVue.jsの初学者です(><)
CHAPTER4 ソート機能を追加しよう に下記の説明があります。
配列メソッドの
sort
は、配列を直接、操作するため、もとのデータの順番も変わってしまいます。算出プロパティ内でもとのデータに対して使用するべきではありません。次のように配列をシャローコピーをして使用したり、Lodashなどのライブラリを使用しましょう。
下記がコードです。
html
1<div id="app"> 2 <input v-model.number="budget"> 円以下に絞り込む 3 <input v-model.number="limit"> 件を表示 4 <button v-on:click="order=!order">切り替え</button> 5 <p>{{ matched.length }} 件中 {{ limited.length }} 件を表示中</p> 6 <ul> 7 <!-- v-forでは最終結果、算出プロパティのlimitedを使用する --> 8 <li v-for="item in limited" v-bind:key="item.id"> 9 {{ item.name }} {{ item.price }}円 10 </li> 11 </ul> 12</div>
javascript
1new Vue({ 2 el: '#app', 3 data: { 4 order: false, 5 // フォームの入力と紐付けるデータ 6 budget: 300, 7 // 表示件数 8 limit: 2, 9 // 元になるリスト 10 list: [ 11 { id: 1, name: 'りんご', price: 100 }, 12 { id: 2, name: 'ばなな', price: 200 }, 13 { id: 3, name: 'いちご', price: 400 }, 14 { id: 4, name: 'おれんじ', price: 300 }, 15 { id: 5, name: 'めろん', price: 500 } 16 ] 17 }, 18 computed: { 19 // budget以下のリストを返す算出プロパティ 20 matched: function() { 21 return this.list.filter(function(el) { 22 return el.price <= this.budget 23 }, this) 24 }, 25 // sortedを新しく追加 26 sorted: function() { 27 return _.orderBy(this.matched, 'price', this.order ? 'desc' : 'asc') 28 }, 29 // limitedで使用するリストをsortedに変更 30 limited: function() { 31 return this.sorted.slice(0, this.limit) 32 } 33 } 34})
orderBy
を記述しているので Lodash を利用しているかと思います。
Lodash
について知らなかったので調べると 細かすぎるけど伝わって欲しいlodash.jsの話 - KAYAC に下記の説明がありました。
破壊的(元の配列の順番を変えてしまう)なので注意
orderBy
は元の配列に影響を与えるのでしょうか?
それは console.log
などで確認する方法はありますか?
先程のVueのコードの場合、どこにconsole.log
などを記述すると元の配列影響があるかどうか確認できますか?
ご存知の方、教えてくださいm(__)m
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/06/21 15:52