どもっす。チッスチッス。

いきなりなんすけど、Vue.jsつかっててこうしたいときあるじゃないすか


  {{ object.name }}

これやりたかったんすよ。マジで。各行の変更を検知して行の表示/非表示きりかえたかったんすよね。
だからVueのコンポーネントで

Vue.extend({
  data: function() {
    return {
      object: {}
    }
  },
  methods: {
    hoge: function () {
      this.object = this.getNewObject()
    }
  }
})

みたいなことしてobject を更新しようとしたらなんかインタラクティブにぃ？バインドされないんだけどぉ？ってなってぇ~

結果

ちゃんとドキュメント読んだら書いてあった。

フィルタ/ソートされた結果の表示

時どき、私達は実際に変更するかまたは元のデータをリセットせずに配列フィルタリングやソートされたバージョンの配列を表示する必要があります。
これを達成するに2つのオプションがあります:

フィルタまたはソートされた配列を返す算出プロパティを作成する
組み込み filterBy そして orderBy されたフィルタを使用する
それは完全な JavaScript であるため、算出プロパティはあなたにより細かい制御と柔軟性を与えますが、
フィルタは共通ユースケースに対してより便利にすることができます。
配列フィルタの詳細な使用方法については、それらのドキュメントをチェックしてください。

それらのドキュメント をチェックしたところ パフォーマンス向上のために、常に検索スコープを制限するのはいいアイデアです。 って書いてあった。やったね。

というわけで…

 
 
   {{ object.name }}

ってやってあげたらいけた。

最高。

ちゃんとドキュメント嫁って話でした。

元記事はこちら

「v-forとv-ifでリストレンダリング制御したいと思っていた俺がアホだった。」