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

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

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

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

Firebase

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

Vue CLI

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

Cloud Firestore

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

解決済

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

TMTN
TMTN

総合スコア51

Vue.js

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

Firebase

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

Vue CLI

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

Cloud Firestore

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

2回答

0リアクション

0クリップ

561閲覧

投稿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

template> <div class="card"> <div class="face face1 flex"> <div class="content"> <img class="profile-icon" width="50" height="50" src="../assets/アイコン.jpg" /> <h3>{{ list.title }}</h3> </div> </div> <div class="face face2 flex"> <div class="content flex"> <button class="hide-btn" @click="deletePost(list.id)">×</button> <p>{{ list.description }}</p> <router-link :to="`/chat/${list.id}`" class="join-btn flex" >ルームへ参加</router-link > <img src="../assets/ブックマーク.jpg" alt="ブックマーク" class="bookmark-icon" @click="savePost" /> <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p> </div> </div> </div> </template>

js

<script> import firebase from "firebase"; import Vue from "vue"; import VueSwal from "vue-swal"; Vue.use(VueSwal); export default { data() { return { userid: "", }; }, props: { //親コンポーネントから子コンポーネントに文字列、数値、配列やオブジェクトなどの値を渡す list: { type: Object, //list内にObject型で格納されてる }, index: { type: Number, //index内にNumber型で格納されてる }, }, created() { firebase .firestore() .collection("posts") .doc(this.$route.params.uid) .get() .then((doc) => { if (doc.exists) { this.userid.push(doc.data().uid); console.log(doc.data()); } }); }, methods: { savePost() { firebase .firestore() .collection("users") .doc(this.$route.params.uid) .collection("bookmarks") .doc(this.$route.params.uid) .set({ uid: this.$route.params.uid, list: this.list, }); }, deletePost(list.id) { // if (this.userid == this.$route.params.uid) { firebase .firestore() .collection("posts") .doc() .delete(); console.log(list.id); this.$swal({ title: "内容確認", text: "投稿を削除しますか?", icon: "warning", buttons: true, dangerMode: true, }).then((willDelete) => { if (willDelete) { this.$swal("投稿を削除しました", { icon: "success", }); this.$router.go({ path: `/board/${this.$route.params.uid}`, force: true, }); } else { this.$swal("キャンセルしました。"); } }); // } }, }, }; </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>

#追記

イメージ説明

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Firebase

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

Vue CLI

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

Cloud Firestore

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