質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

Q&A

解決済

2回答

869閲覧

【Vue x Firestore】propsにて取得したkeyを引数として使いたいです

TMTN

総合スコア52

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

0グッド

0クリップ

投稿2021/05/18 12:56

編集2021/05/19 04:21

#propsにて取得したkeyを引数として使いたいです

border.vueにてlist.vueのリストをv-forを使って表示しており、v-for時にkeyを取得しています。

list.vueでpropsにてlistデータを取得して表示しているのですが、
そのlistデータにあるkey(list.idとしてます)を使ってdeletePost(list.id)を発火させてリストの削除を
実装したいのですが、上手く取得ができない状況です・・

試しにpropsで受け取ったkey(list.id)をそのまま{{list.id}}として
値を表示させると取得できているのは確認しております。

list

その引数をdeletePost(list.id)に渡して削除機能を実装したいのですが、
deletePost(list.id)とすると弾かれてしまいます・・

イメージ説明

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

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

###list.vue

html

1template> 2 <div class="card"> 3 <div class="face face1 flex"> 4 <div class="content"> 5 <img 6 class="profile-icon" 7 width="50" 8 height="50" 9 src="../assets/アイコン.jpg" 10 /> 11 <h3>{{ list.title }}</h3> 12 </div> 13 </div> 14 <div class="face face2 flex"> 15 <div class="content flex"> 16 <button class="hide-btn" @click="deletePost(list.id)">×</button> 17 <p>{{ list.description }}</p> 18 <router-link :to="`/chat/${list.id}`" class="join-btn flex" 19 >ルームへ参加</router-link 20 > 21 <img 22 src="../assets/ブックマーク.jpg" 23 alt="ブックマーク" 24 class="bookmark-icon" 25 @click="savePost" 26 /> 27 <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p> 28 </div> 29 </div> 30 </div> 31</template>

js

1<script> 2import firebase from "firebase"; 3import Vue from "vue"; 4import VueSwal from "vue-swal"; 5Vue.use(VueSwal); 6 7export default { 8 data() { 9 return { 10 userid: "", 11 }; 12 }, 13 props: { 14 //親コンポーネントから子コンポーネントに文字列、数値、配列やオブジェクトなどの値を渡す 15 list: { 16 type: Object, 17 //list内にObject型で格納されてる 18 }, 19 index: { 20 type: Number, 21 //index内にNumber型で格納されてる 22 }, 23 }, 24 created() { 25 firebase 26 .firestore() 27 .collection("posts") 28 .doc(this.$route.params.uid) 29 .get() 30 .then((doc) => { 31 if (doc.exists) { 32 this.userid.push(doc.data().uid); 33 console.log(doc.data()); 34 } 35 }); 36 }, 37 methods: { 38 savePost() { 39 firebase 40 .firestore() 41 .collection("users") 42 .doc(this.$route.params.uid) 43 .collection("bookmarks") 44 .doc(this.$route.params.uid) 45 .set({ 46 uid: this.$route.params.uid, 47 list: this.list, 48 }); 49 }, 50 deletePost(list.id) { 51 // if (this.userid == this.$route.params.uid) { 52 firebase 53 .firestore() 54 .collection("posts") 55 .doc() 56 .delete(); 57 console.log(list.id); 58 this.$swal({ 59 title: "内容確認", 60 text: "投稿を削除しますか?", 61 icon: "warning", 62 buttons: true, 63 dangerMode: true, 64 }).then((willDelete) => { 65 if (willDelete) { 66 this.$swal("投稿を削除しました", { 67 icon: "success", 68 }); 69 this.$router.go({ 70 path: `/board/${this.$route.params.uid}`, 71 force: true, 72 }); 73 } else { 74 this.$swal("キャンセルしました。"); 75 } 76 }); 77 // } 78 }, 79 }, 80}; 81</script>

#border.vue

<template> <div> <Header /> <Post /> <div class="post"> <h2 class="post-tll neon">投稿一覧</h2> <div class="post-inner"> <div class="post-items"> <List v-for="(list, index) in allData" :index="index" :list="list" :key="list.id" /> <!--allDataのデータをlist関数とindex関数にそれぞれ格納--> </div> </div> </div> </div> </template>
<script> import firebase from "firebase"; import Header from "@/components/header.vue"; import Post from "@/components/post.vue"; import List from "@/components/list.vue"; export default { data() { return { title: "", contents: "", image: "", allData: [], }; }, components: { Header, Post, List, }, created() { // "posts"コレクションの全ドキュメントを取得。 firebase .firestore() .collection("posts") .orderBy("time", "desc") .limit(16) .get() .then((snapshot) => { //"posts"(参照先)のスナップショットを得る snapshot.forEach((doc) => { //上記で得たデータをforEachでドキュメントの数だけ"doc"データに格納 this.allData.push(doc.data()); //更にallDataの空箱に格納した"doc"データを格納 }); }); }, }; </script>

#追記

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

deletePost(list.id) と関数宣言されていますが
これだと引数名が「list.id」という使用不可な名前になっていませんか?

引数で受け取らなくてもdeletePostの中でlistはそのまま参照できると思うので「this.list.id」のように使用できないでしょうか。

投稿2021/05/19 04:12

q_sane_q

総合スコア610

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TMTN

2021/05/19 04:35

ご回答ありがとうございます。 propsのデータは既に変数に入っているので同じ名前で取得しようとしていたのですね。。 this.list.idとする事で取得することはできました。 しかし削除機能が上手くいかずでして・・ 分かればお伺いしたいのですが、このthis.list.idを元に削除をしたいと考えていたのですが、 追記赤部分はthis.list.idで取得できているのですが、青部分を参照しないといけないのでしょうか。。 取得方法がわからずでして。。
guest

0

質問内容に一致していなかったので、削除申請中です。
大変失礼しました。


store機能を使うのが簡単です。
僕自身は最初理解するのに手間取りましたが、理解してしまえば色々なデータを一時保存し、別のページから参照可能なので、便利です。というよりも、必須です。
www.ritolab.com/entry/175.amp

色々あるんですが、基本は
state...データの保存先
mutation...データを保存する
action...複雑な処理をさせたい場合

というか感じです。

もしくは、session storage。
こちらはブラウザに記憶させる方法です。
よくpcやスマホのキャッシュをクリアしてくださいという記事があると思いますが、それです。

session storageはブラウザを閉じると消える一時的なものです。

投稿2021/05/19 00:17

編集2021/05/19 00:32
Tatsunosuke

総合スコア599

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TMTN

2021/05/19 03:32

ご回答ありがとうございます。 質問内容に一致していなかった件、承知しました。 しかし、目を通していただいただけで大変ありがたいです。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問