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

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

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

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

Firebase

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

Q&A

解決済

2回答

437閲覧

vuefireでvueの値をfirebaseに渡したいがFirebase.child failedがでてしまう

you88

総合スコア147

Vue.js

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

Firebase

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

0グッド

0クリップ

投稿2018/01/06 07:44

編集2018/01/07 01:17

vuefireを導入しバインディングを試みました。
が、下記のエラーが出てしまい。。。refを上手く設定できていないんでしょうか?

var Vue = require("vue"); var VueFire = require("vuefire"); var Firebase = require("firebase"); var firetalks = firebase.database().ref('talks') var chat = new Vue({ el: "#chat", data: { message: { user_id:'', board_id:'', contents:'', } }, firebase: { talks: firetalks }, methods: { addMessage: function(){ firetalks.push(this.message) this.message.user_id = '' this.message.board_id = '' this.message.contents = '' } } })

html

<form v-on:submit.prevent="addMessage"> <textarea v-model="message.user_id" class="hidden" value="<%= @current_user.id %>"></textarea> <textarea v-model="message.board_id" class="hidden" value="<%= @post.id %>"></textarea> <input type="text" name="" v-model="message.contents" class="col-sm-8 form-control show_form"></textarea> <button type="submit" name="button" class="btn btn-primary col-sm-3">送信</button> </form>

エラー内容

firebase.js:136 Uncaught Error: Firebase.child failed: First argument was an invalid path: "talks/[object MouseEvent]". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"

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

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

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

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

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

guest

回答2

0

ベストアンサー

古いソースコードにvuefireを導入しても古いソースコードのままです.
丸々変えたほうがいいと思います.

投稿2018/01/06 10:54

Yatima

総合スコア1159

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

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

Yatima

2018/01/06 15:58

変更後のコードを質問欄に貼ってもらってもいいですか?
Yatima

2018/01/06 16:09

既存のコードを元に変更するのではなく,jsfiddleのコードを元に書き直したほうが良いと思います. 丸々変えたほうがいい,とはそういう意味です.
you88

2018/01/07 00:04

jsfiddleのコードを元にmethodをaddUSerのみ、computedはバリデーションが今回無いので省いている形になります
Yatima

2018/01/07 01:00

HTMLはどうですか?
you88

2018/01/07 01:16

あー、たしかにHTML側はv-modelでつなぐの同じだと思い、変えていませんでした。。v-on部分を変更してみました。
Yatima

2018/01/07 01:41

気付きましたか. そういった想定外の違いが動かない原因になるのは,コーディングの世界ではよくあることなので, 面倒に思えても,動かないコードをこねくり回すより動くコードを改修したほうが,結局近道になるという話なのです. 動かないコードとのにらめっこは案外時間を食われますから. さて,まだ違う部分がありますよね.
you88

2018/01/07 02:58

こちらyarnをアップデートし、下記にimport部分を変更したらfirebaseに渡せました! import Vue from 'vue/dist/vue.esm'; import App from '../app.vue' var VueFire = require("vuefire"); var Firebase = require("firebase"); アドバイスありがとうございました!
guest

0

import Vue from 'vue/dist/vue.esm'; import App from '../app.vue' var VueFire = require("vuefire"); var Firebase = require("firebase"); var firetalks = firebase.database().ref('talks') var chat = new Vue({ el: "#chat", data: { message: { user_id:'', board_id:'', contents:'', } }, firebase: { talks: firetalks }, methods: { addMessage: function(){ firetalks.push(this.message) this.message.user_id = '' this.message.board_id = '' this.message.contents = '' } } })

html

<form v-on:submit.prevent="addMessage"> <textarea v-model="message.user_id" class="hidden" value=""><%= @current_user.id %></textarea> <!--<textarea v-model="message.board_id" class="hidden" value=""><%= @post.id %></textarea> --> <input type="text" name="" v-model="message.board_id" value="1" class="col-sm-8 form-control show_form"> <input type="text" name="" v-model="message.contents" class="col-sm-8 form-control show_form"> <button type="submit" name="button" class="btn btn-primary col-sm-3">送信</button> </form>

対応策
・var Vue = require("vue");だと上手く動かず、
import Vue from 'vue/dist/vue.esm';に変更。

・yarnでvueやvuefireをアップデート

投稿2018/01/07 03:00

you88

総合スコア147

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問