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

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

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

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

Firebase

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

Q&A

解決済

1回答

2399閲覧

vue.jsのv-modelで受け取った値をfirebaseに渡したい

you88

総合スコア147

Vue.js

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

Firebase

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

0グッド

0クリップ

投稿2018/01/05 14:39

編集2018/01/06 03:20

vue.jsのv-modelで受け取った値をfirebaseに保存したいんですがvueインスタンスのdataってどうやって渡せばいいんでしょうか?

var firetalks = new Firebase('https://mchat-test-c402b.firebaseio.com/'); var chat = new Vue({ el: "#chat", data: { message: { user_id:[], board_id:[], contents:[], } }, methods: { addMessage: function(){ firetalks.child(`talks`).set({ this.message.user_id: [], this.message.board_id: [], this.message.message: [], }); } } })

html

<div class="form-inline" id="chat"> <textarea v-model="message.user_id" class="hidden"><%= @current_user.id %></textarea> <textarea v-model="message.board_id" class="hidden"><%= @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" v-on:click="addMessage" class="btn btn-primary col-sm-3">送信</button> </div>

これでdataの3つの値をfirebaseに渡したいのですが上手く渡せていないです。。。

vuefireを導入しバインディングを試みました。
が、下記のエラーが出てしまい。。。

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

html

<div class="form-inline" id="chat"> <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" v-on:click="addMessage" class="btn btn-primary col-sm-3">送信</button> </div>

エラー内容

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ページで確認できます。

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

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

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

sakapun

2018/01/05 16:32

ソースはこれだけですか?firetalksがどこにもでてませんが、これだけだと回答できないと思いますので、もっと詳細をお書きください。
you88

2018/01/05 22:53

失礼しました!追記しました!
guest

回答1

0

ベストアンサー

それは古いソースコードです.
たとえばこちらなどを参考にし直してください.

投稿2018/01/05 23:15

Yatima

総合スコア1159

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

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

you88

2018/01/05 23:23

こちらってvuefireを導入しないと動かないコードになるのでしょうか?
Yatima

2018/01/06 00:48

導入をためらわれているのですか? わざわざ使わない意味はあまりないと思いますが.
you88

2018/01/06 03:18

あ、いや特にためらっているわけではないです!導入してみました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問