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

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

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

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

Firebase

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

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

535閲覧

setで登録されたfirebaseのデータを削除したい

tamaharu31

総合スコア4

Vue.js

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

Firebase

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

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/06/06 08:43

現在、google bools apiを用いた本の検索と気になる(保管)機能の実装したサイトを制作しております。

現状できていること)
・検索を押して本を表示させること
・気になるボタンを押して、firebaseにidとtitleを保管すること
・気になるボタンのクリックイベントで画面上にはapi内のタイトルを気になるリストに表示する。firebaseにはapi内のタイトル・idデータを保管する

やりたいこと)
・削除ボタンを押して、api内のタイトルをリストから削除し、firebaseからはtitleとidを削除する

上記のやりたいことにおいて、下記のように書いているのですがうまく実行されません。
アドバイスを頂けると助かります。
よろしくお願いいたします。

Javascriptの該当箇所は
//IDとtitleを削除するの部分です。

itemsの中身↓

tems: Array(10)  0:  accessInfo: Object  etag: "q1pOLjF+ueM"  id: "peklNwAACAAJ"  kind: "books#volume"  saleInfo: Object  searchInfo: Object  selfLink: "https://www.googleapis.com/books/v1/volumes/peklNwAACAAJ"  volumeInfo: Object   allowAnonLogging: (...)   authors: (...)canonicalVolumeLink: (...)   contentVersion: (...)   description: (...)   industryIdentifiers: (...)   infoLink: (...)   language: (...)   maturityRating: (...)   pageCount: (...)   previewLink: (...)   printType: (...)   publishedDate: (...)   readingModes: (...)   title: "、○○○○"

firebaseの画面
https://gyazo.com/9175a548479d93567ca6e419d1cc7941

HTML

1<div class="hamburger-menu" id="favoshelf"> 2 <input type="checkbox" id="menu-btn-check"> 3 <label for="menu-btn-check" class="menu-btn"><span></span></label> 4 <div class="menu-content"> 5 <ul> 6 <li> 7  <p>気になるリスト</p> 8 </li> 9 <li v-for="booksFav in booksFavs"> 10  {{booksFav.title}} 11  <button v-on:click="removeFavorite(booksFav.id)" class="btn btn-light">削除</button> 12 </li> 13 </ul> 14 </div> 15   </div>

Javascript

1const vm = new Vue({ 2 el: '#app', 3 data() { 4 return{ 5 query:'', 6 items:[], //#apiから取得したデータを格納 7 booksFavs:[] 8 }; 9 }, 10 methods:{ 11 getResult(query){ 12 axios.get("https://www.googleapis.com/books/v1/volumes?q=search" + query).then(response => { 13 console.log(response.data); 14 this.items = response.data.items; 15 const bookDate =response.data?.items?.volumeInfo?.imageLinks?.thumbnail; 16 if(typeof bookDate == "undefined") { 17 console.log("未定義です。"); 18 } 19 firebase.database().ref('my-key/').on('value', snapshot => { 20 if (snapshot) { 21 const bookList = snapshot.val(); 22 let booksFavs = []; 23 // snapshotで最新状態を取得する 24 console.log(snapshot.val()); 25 // データオブジェクトを配列に変更する 26 Object.keys(bookList).forEach((val, key) => { 27 bookList[val].id = val; 28 booksFavs.push(bookList[val]); 29 }); 30 this.booksFavs = booksFavs; 31 } 32 }); 33 }); 34 }, 35 addFavorite(setId,setTitle) { 36 //気になるボタンの本のIDとtitleを取得する 37 let setDatas = { 38 id : setId, 39 title : setTitle 40 }; 41 //IDとtitleをfirebaseに登録する 42 firebase 43 .database() 44 .ref(`my-key/${setId}`) 45 .set(setDatas); 46 }, 47 //IDとtitleを削除する 48 removeFavorite(removeId) { 49 let removeDatas = { 50 id : removeId, 51 }; 52 firebase 53 .database() 54 .ref(`my-key/${setId}`) 55 .remove(); 56 } 57 } 58});

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

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

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

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

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

guest

回答1

0

ベストアンサー

単なるタイプミスです。removeFavoriteの変数をしっかりチェックしましょう。

前の質問でも書きましたが期待と異なる動きをする場合は都度変数をconsole.logするなりブレークポイントを設定するなりして状態を調べましょう。

投稿2021/06/06 09:27

hope_mucci

総合スコア4447

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問