【Vue x Firestore】子コンポーネントから親コンポーネントで受けたデータをもとに条件をつけてリストを再表示させたい

Question

#子コンポーネントから親コンポーネントで受けたデータをもとに条件をつけてリストを再表示させたい

現在、post.vue(子コンポーネント)にてinputタグで入力フォームを作成し、
そこで入力された値を$emitでboard.vue(親コンポーネント)に渡しています。（値を取得できていることは確認済）

通常投稿一覧に投稿されたpostを「時間(降順)」で表示させておりますが、
post.vue(子コンポーネント)から受けたデータをもとに「ジャンル」という値で絞って再表示させたいです。
※Firestoreのpostsコレクションのデータにはそれぞれgenreというフィールドに値は取得しております。

this.postDataの中身は以下のようになっております。

入力フォームで入力された値はpost.vue(子コンポーネント)より取得はできているので
あとは以下を行って表示させると思うのですが、どのように条件を絞ってあげたらいいのか分からない状況です。

• valueを引数に渡しているので、valueをもとにデータを絞る
• Firestore内のフィールド「genre」でデータを絞る
• postData内を一度クリアしてあげて再pushしてあげる

分かる方いらっしゃいましたらお力添えをいただきたいです。

よろしくお願いいたします。

#post.vue(子コンポーネント)

<input placeholder="例）アクション  恋愛  ミステリー  SF  ホラー  ミュージカル  etc.." class="search-main-item" type="search" @input="searchData($event.target.value)"/>

searchData(value) {
      this.$emit("searchData", value);
    }

#board.vue(親コンポーネント)

<template>
  <div>
    <Header />
    <Post @searchData="search" />
    <!--子コンポーネントから$emitで受けたデータを関数とする。※searchに()を付けるとvalueの引数が取れないので注意。-->
    <div class="post">
      <h2 id="top" class="post-tll neon">投稿一覧</h2>
      <div class="post-inner">
        <div class="post-items">
          <paginate name="paginate-log" tag="ol" :list="postData" :per="12">
            <List
              v-for="(list, index) in paginated('paginate-log')"
              :index="index"
              :list="list"
              :userDatas="userDatas"
              :key="list.id"
            />
          </paginate>
          <paginate-links
            for="paginate-log"
            class="pagination flex"
            v-scroll-to="postTop"
            :show-step-links="true"
          ></paginate-links>
          <!--postDataのデータをlist関数とindex関数にそれぞれ格納-->
        </div>
      </div>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      title: "",
      contents: "",
      image: "",
      postData: [],
      paginate: ["paginate-log"],
      postTop: "#top",
      userDatas: [],
    };
  },
  components: {
    Header,
    Post,
    List
  },

  methods: {
    search(value) {
      firebase
        .firestore()
        .collection("posts")
        .orderBy("genre")
        .orderBy("time", "desc")
        .get()
        .then(snapshot => {
          snapshot.forEach(doc => {
            this.postData.push({ ...doc.data(), id: doc.id });
          });
        });
    }
  },

#追記１

以下はコードになります。

実際にタイプした時の画面になります。
入力したタイミングでリアルタイムで表示が切り替われば理想です。。

#追記2
以下のようにコードを書き替えましたので掲載させていただきます。

#board.vue(親コンポーネント)

<template>
  <div>
    <Header />
    <Post v-model="searchWord" />
    <div class="post">
      <h2 id="top" class="post-tll neon">投稿一覧</h2>
      <div class="post-inner">
        <div class="post-items">
          <paginate name="paginate-log" tag="ol" :list="filteredPostData" :per="12">
            <List
              v-for="(list, index) in paginated('paginate-log')"
              :index="index"
              :list="list"
              :userDatas="userDatas"
              :key="list.id"
            />
          </paginate>
          <paginate-links
            for="paginate-log"
            class="pagination flex"
            v-scroll-to="postTop"
            :show-step-links="true"
          ></paginate-links>
        </div>
      </div>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      title: "",
      contents: "",
      image: "",
      postData: [],
      paginate: ["paginate-log"],
      postTop: "#top",
      userDatas: [],
      searchWord: "",
      filteredPostData: []
    };
  },
  components: {
    Header,
    Post,
    List
  },
    computed: {
      filteredPostData(value) {
        console.log(value);
        if (value != "") {
          return this.postData.filter(v => {
            return ~v.genre.indexOf(this.searchWord);
          });
        } else {
          return this.postData;
        }
      }
    }
  },
  created() {
    // "posts"コレクションの全ドキュメントを取得。
    firebase
      .firestore()
      .collection("posts")
      .orderBy("time", "desc")
      .get()
      .then(snapshot => {
        //"posts"(参照先)のスナップショットを得る
        snapshot.forEach(doc => {
          //上記で得たデータをforEachでドキュメントの数だけ"doc"データに格納
          this.postData.push({ ...doc.data(), id: doc.id });
          //更にpostDataの空配列に格納した"doc"データを格納
        });
      });
};
</script>

#post.vue(子コンポーネント)

<div class="search-inner flex">
      <h2 class="search-tll neon flex">Cinemaryを検索する</h2>
      <hr class="separate" />
      <div class="search-main-contens flex">
        <input
          placeholder="例）アクション 恋愛 ミステリー SF ホラー ミュージカル etc.."
          class="search-main-item"
          type="search"
          v-model="inputValue"
        />
      </div>

export default {
  data() {
    return {

 ~ 省略 ~

},
  props: {
    value: {
      type: String,
      required: true
    }
  },
  computed: {
    inputValue: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      }
    }
  },
    searchData(value) {
      this.$emit("searchData", value);
    }
  }
};

また、以下のようなエラーが出ておりまして調べてみましたが赤で囲った箇所のエラー内容で
objectとなっている原因が分からなかった為、エラー内容を追記いたします・・

[Vue warn]: Method "computed" has type "object" in the component definition. Did you reference the function correctly?

メソッド "computed" は、コンポーネント定義のタイプ "object" を持っています。関数を正しく参照しましたか?

---

青色括弧につきましては、 filteredPostDataをdata()内で初期化してくださいとのことでしたので、
data()内で filteredPostData: []と初期化しました。

#追記３

#追記４

###検索前

###検索後

###「t」を削除後

Answer 1

現状の@inputで発火するやり方ですと、
一文字一文字タイプするたびにfirestoreへのアクセスが発生してしまうので、
"初期読み込み時にpostData"が取得されているのであれば、下記のような形でいかがでしょうか？

  methods: {
    search (value) {
      if (value != '') {
        this.postData = this.postData.filter(
          (v) => return ~v.genre.indexOf(value)
        )
      }
    }
  },

Comments

[TMTN]

m2l様

こちらの質問に対してもご回答ありがとうございます。
返信遅くなり申し訳ございません・・
お力添え本当に助かります。

初期読み込み時に既にスクショを掲載させて頂いておりますように投稿一覧として表示はしておりますので、
m2l様の頂いたコードを参考に以下のようにしました。
少し括弧の位置に不備があったのかエラーが出てしまっていたため、一部修正して以下のようにしてます。
-------------------------------------------------------------
methods: {
search(value) {
if (value != "") {
this.postData = this.postData.filter(v => {
return ~v.genre.indexOf(value);
});
}
}
},
-------------------------------------------------------

しかし、現状、input内に１文字でも入力がされると追記させて頂いたスクショのように表示がされなくなってしまいました。。

そもそもinputではm2l様の仰る通り１文字１文字するたびにfirestoreへのアクセスが発生してしまうのであまり適していないのでしょうか。。セレクトボックスのが使い勝手良いのかなとも考えたりします。
※可能であればinputで実装したいですが・・

追記に詳細追加いたしますのでご確認お願いいたします。

[m2l]

ご連携いただきまして、ありがとうございます。
検索形式はお任せでよいですが、データ自体はどこかに退避して行った方が良いと思います。
（firestoreのアクセスにも制限があったかとおもいますし、有料プランの場合その分だけ費用が掛かってしまいますので。）
少し修正量多くなってしまいますが、computedに移して行っていった方が良さそうなので下記ですといかがでしょうか？
抜けがございましたら申し訳ございませんが宜しくお願い致します。

---

#1 v-modelに変更
<Post v-model="searchWord" />

#2 data部にsearchWord追加
searchWord: "",

#3 post.vue の template部 をv-model に変更
<input placeholder="例）アクション 恋愛 ミステリー SF ホラー ミュージカル etc.." class="search-main-item" type="search" v-model="inputValue"/>

#4 post.vue の propsを下記にする
props: {
value: {
type: String,
required: true
}
}

#5 post.vue の computed に getterとsetterを追加
computed: {
inputValue: {
get() {
return this.value;
},
set(value) {
this.$emit("input", value);
}
}
}

#6 postDataをcomputed経由に変更
<paginate name="paginate-log" tag="ol" :list="filteredPostData" :per="12">

#7 computedを追加し、サーチ内容がない場合はそのまま、それ以外はフィルタ結果を返す
computed: {
filteredPostData () {
if (value != "") {
return this.postData.filter(v => { return ~v.genre.indexOf(this.searchWord); });
} else {
return this.postData
}
}
}

---

[TMTN]

m2l様

ご回答ありがとうございます。

検索形式は入力フォーム形式で大丈夫であればこのままinputタグで進めてみます。
ありがとうございます。

確かにm2l様の仰る通りpostDataをクリアにして行うより一度データ自体はどこかに退避して
別々で行ったほうが良さそうですね。

今から仕事の為、実際の環境で確かめられるのは明日になります・・。
沢山修正頂きご提示頂きましたがすぐに確かめれずすいません。

明日帰宅後確認して改めてご連絡させて致します。

[m2l]

ご返信頂きましてありがとうございます。
かしこまりました！
何卒宜しくお願いします。

[TMTN]

m2l様

今確かめられる環境でない為、ご提示頂いたコードを見てのご質問になるのですが、２点ございます。

⑴#4 post.vue の propsを下記にする、について

propsで親コンポーネントから子コンポーネントへデータを渡す場合、
親コンポーネント側で子コンポーネントに対して以下のようにしてあげる必要があるとの認識でしたが必要はなかったでしょうか。
-------------------------------------------------------------
<Post v-model="searchWord" :value="value" />
-------------------------------------------------------------

⑵#5 post.vue の computed に getterとsetterを追加のset(value)について

-------------------------------------------------------------
set(value) {
this.$emit("input", value);
}
-------------------------------------------------------------

this.$emit("input", value);の$emit()内の第一引数はカスタムイベント名が入る認識ですが、
template部 を＠inputからv-model に変更にしている為、inputというイベントがなく
カスタムイベントが必要なのかなとふと感じたのですが、必要なかったでしょうか。

以上2点になりますが、コードを見ての質問なので自身の認識誤りでしたらすいません・・

[m2l]

ご確認頂きましてありがとうございます。
記事のご連携レベルで恐縮ですが、
下記のgetter, setterのような形でvalue属性に対してのバインドなので問題ないかと思います。
https://qiita.com/toshifumiimanishi/items/07c8e96eb6f8e50c5e27

[TMTN]

m2l様

ご回答ありがとうございます。
確かに記事を読む限りではgetter, setterのような形では問題なさそうですね。
ご確認頂きありがとうございました。

[TMTN]

m2l様

大変お待たせ致しました。
ご確認遅くなり申し訳ございません。

追記２として内容を追加させていただきました。

------------------------------------------------------------------
computed: {
filteredPostData(value) {
console.log(value);
if (value != "") {
return this.postData.filter(v => {
return ~v.genre.indexOf(this.searchWord);
});
} else {
return this.postData;
}
}
}
------------------------------------------------------------------

valueに対してエラーが出ておりましたので、filteredPostData(value)として引数に渡しました。
しかし、コンソールでvalueの値を子コンポーネントから渡ってきているか確認をしてみたのですが、
コンソールの結果がデバックツール内で表示されなく、渡ってきていないような気もします・・

追記２にboard.vue（親コンポーネント）とpost.vue(子コンポーネント)を全て追記しましたのでお時間ある時にご確認いただけると幸いです・・。よろしくお願いいたします。

[m2l]

仕事でご返信遅くなり申し訳ございません。。
すみません。。
value引数に入れてありましたが、こちらのミスなので下記でどうでしょうか？
（机上でしか確認できず、申し訳ないです。）

------------------------------------------------------------------
computed: {
filteredPostData() {
if (this.searchWord != "") {
return this.postData.filter(v => {
return ~v.genre.indexOf(this.searchWord);
});
} else {
return this.postData;
}
}
}
------------------------------------------------------------------

[TMTN]

とんでもございません！お仕事お疲れのところ回答ありがとうございます・・

提示いただいたコードに修正いたしましたが、追記３のようにまだエラーが出てしまっておりますね・・

[m2l]

ご返信ありがとうございます。
filteredPostDataはdataの中に入れなくても大丈夫ですね。
Computedのところ、methodsの中に入っていたりしないでしょうか？

[TMTN]

m2l様
ご確認いただきありがとうございます。
仰る通り誤ってmethodsの中にComputedが入っておりました・・
大変申し訳ございませんでした・・

しかし、修正しましたが追記４にあるように検索前では全ての投稿が表示（postData）、
検索フォームに「t」と試しに入力したところ検索後のように表示されませんでした。。

また、「t」を消してinputタグ内に文字が入っていない状態にしても全ての投稿が表示（postData）に戻らない状態です・・リロードしたら戻ることを確認出来ております。

[m2l]

かしこまりました。
そうなんですね。。
後程codepenでためしてみますのでお待ち下さいませ。

[TMTN]

お仕事後でお疲れのところ本当に申し訳ございません・・
本当にありがとうございます・・

お時間余裕ある時で構いませんのでよろしくお願いいたします。

[m2l]

少し親子のコンポーネント間でリアルタイム検索できるか試してみましたが、特に問題なくできそうな形でした。
子コンポーネントに不要なメソッドや、computedがmethodsの中に入っている等ございませんでしょうか？
https://codepen.io/masanori0209/pen/RwpJVrj

[TMTN]

m2l様

確認が遅くなっていて申し訳ございません・・
m2l様のご確認いただいたcodepenでは確かにリアルタイム検索できておりますね。。

いまだコードを見比べ確認しておりますが、原因が分からずでして・・もう少々確認にお時間いただきますようお願いいたします・・

[TMTN]

m2l様

大変遅くなりました。
私の検索仕方に誤りがありました・・

デベロッパーツールのsauceで中身を確認していると「return ~v.genre.indexOf(this.searchWord);」と
genreで検索ワードとしているのに追記に掲載したようにgenreには存在しない「t」という値で入力していました・・本当に恥ずかしい間違いでm2l様のお時間を頂戴してしまい申し訳ございません・・

genreで検索かけるとちゃんとリアルタイムで表示してくれました・・今回もお忙しい中、またお仕事でお疲れの中ご教示いただきまして本当にありがとうございました！！感謝の気持ちでいっぱいです・・

[m2l]

いえいえ！うまく解決できて何よりでございます。

[TMTN]

毎度ご回答いただいた際、色々と確認ややり取りでお時間頂戴してしまい申し訳ございません・・