🐕

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

2022/11/05に公開

2件

JavaScript

Vue.js

tech

はじめに

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

結論

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()

引用

疑問点

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

追記

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

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

GitHubで編集を提案

Discussion

な 2022/11/08に更新

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

Array.sortは破壊的変更を加えるため、もとの配列(this.items)の順序を変更してしまいます。ソートした配列を利用したい場合はArray.sliceで新しい配列を作成し、sortしたほうが良いです
computedの戻り値がundefinedになっています。ソート後の配列を返すようにすると一般的なvueの使い方になるとおもいます

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

hayaton 2022/11/09

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