Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

<tr v-for="object in objects" v-if="object.visible">
  <td>{{ object.name }}</td>
</tr>

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

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

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

結果

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

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

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

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

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

というわけで...

<input type="text" v-model="search_word">
<tr v-for="object in objects | filterBy search_word in 'name'">
  <td>{{ object.name }}</td>
</tr>

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

最高。

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

cloudpack
Amazon Web Services (AWS) の導入設計、環境構築、運用・保守をサポートするマネジドホスティングサービス
https://cloudpack.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした