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

編集履歴

質問編集履歴

修正

2021/06/07 11:32

投稿

TMTN

スコア53

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -571,3 +571,11 @@
 ![イメージ説明](0cddfb5aeded74fb8fd82fe26c09e944.png)
+###「t」を削除後
+![イメージ説明](c55fa2516d4e2850561176b65074245e.png)

追記４追加

2021/06/07 11:32

投稿

TMTN

スコア53

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -551,3 +551,23 @@
 ![イメージ説明](2bc6f32ea0d3934ba668bf06eb66f14b.png)
+#追記４
+###検索前
+![イメージ説明](0710b574e28cf58c88b16f39789329fb.png)
+###検索後
+![イメージ説明](0cddfb5aeded74fb8fd82fe26c09e944.png)

追記３追加

2021/06/07 11:28

投稿

TMTN

スコア53

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -543,3 +543,11 @@
 青色括弧につきましては、 filteredPostDataをdata()内で初期化してくださいとのことでしたので、
 data()内で filteredPostData: []と初期化しました。
+#追記３
+![イメージ説明](2bc6f32ea0d3934ba668bf06eb66f14b.png)

追記２追加

2021/06/07 11:01

投稿

TMTN

スコア53

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -239,3 +239,307 @@
 ![イメージ説明](94b35374a4fefecf891b36eecffdc5cc.png)
+#追記2
+以下のようにコードを書き替えましたので掲載させていただきます。
+#board.vue(親コンポーネント)
+```html
+<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>
+```
+```js
+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(子コンポーネント)
+```html
+<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>
+```
+```js
+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);
+    }
+  }
+};
+```
+![イメージ説明](4454160ec20fc79de9b26b2aab953194.png)
+また、以下のようなエラーが出ておりまして調べてみましたが赤で囲った箇所のエラー内容で
+objectとなっている原因が分からなかった為、エラー内容を追記いたします・・
+```ここに言語を入力
+[Vue warn]: Method "computed" has type "object" in the component definition. Did you reference the function correctly?
+```
+メソッド "computed" は、コンポーネント定義のタイプ "object" を持っています。関数を正しく参照しましたか?
+---
+青色括弧につきましては、 filteredPostDataをdata()内で初期化してくださいとのことでしたので、
+data()内で filteredPostData: []と初期化しました。

追記１

2021/06/07 02:48

投稿

TMTN

スコア53

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -217,3 +217,25 @@
   },
 ```
+#追記１
+以下はコードになります。
+![イメージ説明](060d2a11b35a7a8e932f6c01d58d6f5c.png)
+実際にタイプした時の画面になります。
+入力したタイミングでリアルタイムで表示が切り替われば理想です。。
+![イメージ説明](94b35374a4fefecf891b36eecffdc5cc.png)

内容変更

2021/06/06 06:12

投稿

TMTN

スコア53

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -34,7 +34,17 @@
 入力フォームで入力された値はpost.vue(子コンポーネント)より取得はできているので
-あとは条件で絞って表示させるのですが、どのように条件を絞ってあげたらいいのか分からない状況です。
+あとは以下を行って表示させると思うのですが、どのように条件を絞ってあげたらいいのか分からない状況です。
+- valueを引数に渡しているので、valueをもとにデータを絞る
+- Firestore内のフィールド「genre」でデータを絞る
+- postData内を一度クリアしてあげて再pushしてあげる
@@ -178,7 +188,7 @@
   methods: {
-    search() {
+    search(value) {
       firebase

内容変更

2021/06/05 16:00

投稿

TMTN

スコア53

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -2,17 +2,21 @@
-現状、post.vue(子コンポーネント)にてinputタグで検索窓を作成し、
+現在、post.vue(子コンポーネント)にてinputタグで入力フォームを作成し、
-そこで入力された値を$emitでboard.vue(親コンポーネント)に渡しています。
+そこで入力された値を$emitでboard.vue(親コンポーネント)に渡しています。（値を取得できていることは確認済）
+![イメージ説明](03ba777fc4cc8ad0342800dfe4bd55e5.png)
+通常投稿一覧に投稿されたpostを「時間(降順)」で表示させておりますが、
-そのデータをもとに「ジャンル」という値で絞って再表示させたいです。
+post.vue(子コンポーネント)から受けたデータをもとに「ジャンル」という値で絞って再表示させたいです。
-Firestoreのpostsコレクションのデータにはそれぞれgenreというフィールドに値は取得しております。
+※Firestoreのpostsコレクションのデータにはそれぞれgenreというフィールドに値は取得しております。
@@ -28,7 +32,7 @@
-検索窓で入力された値はpost.vue(子コンポーネント)より取得はできているので
+入力フォームで入力された値はpost.vue(子コンポーネント)より取得はできているので
 あとは条件で絞って表示させるのですが、どのように条件を絞ってあげたらいいのか分からない状況です。

内容変更

2021/06/05 15:54

投稿

TMTN

スコア53

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -182,6 +182,8 @@
         .collection("posts")
+        .orderBy("genre")
         .orderBy("time", "desc")
         .get()