🐕

[Vue]methodsでsortしたitemsをcomputedに検知させる

2022/11/04に公開約1,300字2件のコメント

はじめに

本記事は、筆者による理解の復習・確認やアウトプットの練習のために書いております。
間違った解釈等ございましたら、ご指摘いただけますと幸いです。

結論

methods で sort するのではなくて、computed 側で sort する。

できた例

<script>
export default {
  computed: {
    fugafuga() {
      return this.items.sort("処理") // sortされた状態のitemsが取得できる
    }
  },
  methods: {
    hogehoge() {
      //
    }
  }
}
</script>

できなかった例

<script>
export default {
  computed: {
    fugafuga() {
      return this.items // hogehoge()でsortしたはずなのに、sort前のitemsが取れてしまう
    }
  },
  methods: {
    hogehoge() {
      this.items.sort("処理")
    }
  }
}
</script>

背景

sort する前の段階で methods()で色々加工した上でソートをする必要があった。
sort をした時にてっきり、変更を検知してくれるものだと思っていた。

Vue は画面の更新もトリガするために、監視された配列の変更メソッドを抱合 (wrap) します。
抱合されたメソッドは次のとおりです:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

引用

https://jp.vuejs.org/v2/guide/list.html#変更メソッド

疑問点

なぜ sort をした時に変更検知されなかったのか

追記

sort()は元の配列を変更する破壊的変更のため、配列を複製し、その配列を sort するのが好ましいです(コメントいただいた方、ありがとうございます)

this.items.slice().sort("処理")

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#sort_は同じ配列への参照を返す

GitHubで編集を提案

Discussion

2点気になったのでコメントします

  1. Array.sortは破壊的変更を加えるため、もとの配列(this.items)の順序を変更してしまいます。ソートした配列を利用したい場合はArray.sliceで新しい配列を作成し、sortしたほうが良いです
  2. computedの戻り値がundefinedになっています。ソート後の配列を返すようにすると一般的なvueの使い方になるとおもいます
export default {
  computed: {
    fugafuga() {
      return this.items.slice().sort("処理"); // sortされた状態のitemsが取得できる
    }
  },
}

コメントありがとうございます!
参考にさせていただきます

ログインするとコメントできます