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 "]"
回答1件
あなたの回答
tips
プレビュー