使用VueFire编辑Firebase数据 [英] Edit Firebase data using VueFire
本文介绍了使用VueFire编辑Firebase数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个简单的 admin 应用程序，可以通过表单创建新的商家，并将它们添加到表中。我创建了添加和删除条目的方法，但不知道如何继续创建更新方法。内容是contenteditable，我想保存在保存按钮单击。请参阅我的CodePen： http://codepen.io/Auzy/pen/177244afc7cb487905b927dd3a32ae61 要做到这个我用VueJS和Vuefire用下面的方式（原谅Bootstrap）：
$ $ $ $ $ $ $ $ $ $表格 - >
< table class =table table-striped>
< tr>
企业名称< / th>
Vanity URL< / th>
Story< / th>
< th>动作< / th>
< / tr>
< tr v-for =post in posts：key =post ['.key']>
< td contenteditable v-model =newPost.title> {{post.title}}< / td>
< td> {{post.content}}< / td>
< td> {{post.story}}< / td>
< td>
将按钮v-上：点击= removePost（后） 类型= 按钮 类= BTN BTN-危险BTN-SM ><跨度类= glyphicon glyphicon-垃圾 aria-隐藏= 真 >< /跨度>删除< /按钮>
< / td>
< / tr>
< / table>
< / div>
< / div>
和JS：
//设置Firebase
let config = {
... firebase stuff ...
}
let firebaseapp = firebase.initializeApp配置）;
let db = firebaseapp.database（）;
let postsRef = db.ref（'blog / posts'）
//创建Vue应用
var app = new Vue（{
//要挂载的元素to
el：'#app'，
//初始数据
数据：{
newPost：{
title：''，
内容：''，
story：''
}
}，
// firebase绑定
// https://github.com/vuejs/vuefire
firebase：{
posts：postsRef
}，
// methods
methods：{
addPost：function（）{
postsRef。 push（this.newPost）;
this.newPost.title ='';
this.newPost.content ='';
this.newPost.story ='';
}，
removePost：function（post）{
postsRef.child（post ['.key']）。remove（）$ b $ toastr.success（'Business removed successfully'）
}
}
}）
解决方案
<你必须使用 $ bindAsArray f或数组，而 $ bindAsObject 用于将firebase数据绑定到组件数据的对象。您可以使用 $ firebaseRefs ，它由 vuefire 提供来更新或修改端点。
这里是更新的 codepen 。
b
$ b
我已经对你的代码进行了如下修改：
//创建Vue应用程序
var app = new Vue（{
//元素挂载到
el：'#app'，
//初始数据
data：{
posts：[]，//所有的商业帖子都显示
newPost：{
title：''，
content：''，
story：
$ addPost：function（）{
postsRef.push （this.newPost）;
this.newPost.title ='';
this.newPost.content ='';
this.newPost.story ='';
} ，
editPost：function（post）{
//将帖子值设置为
this.newPost = post
}，
updatePost：function（post）{
const childKey = post ['.key'];
/ *
* Firebase不接受speacial字符作为价值
*所以删除`.key`属性从
* /
删除post ['。key'];
/ *
*设置更新后的值
* /
this。$ firebaseRefs.posts.child（childKey）.set（post）
}，
removePost：function（post）{
postsRef.child（post ['.key']）。remove（）$ b $ toastr.success（'Business removed successfully'）
}，
}，
//将绑定数据以数组形式明确地设置为firebase。
created（）{
this。$ bindAsArray（'posts'，postsRef）;
$ p
$ b $ p $在模板中：
< div id =app>
< ul class =nav nav-pills nav-justify>
< li role =presentationclass =active>< a href =＃>企业< / a>< / li>
< li role =presentation>< a href =＃>事件< / a>< / li>
< li role =presentation>< a href =＃>位置< / a>< / li>
< / ul>
< br />
< div class =panel panel-default>
< div class =panel-heading>
< / div>
< div class =panel-body>
< form id =form>
< div class =form-group>
< label for =exampleInputPassword1>商家名称< / label>
< input v-model =newPost.titletype =textclass =form-controlid =exampleInputPassword1placeholder =Business Name>
< / div>
< div class =form-group>
< label for =basic-url> Vanity URL< / label>
< div class =input-group>
< span class =input-group-addonid =basic-addon3> / business /< / span>
< input v-model =newPost.contenttype =textclass =form-controlid =basic-urlaria-describeby =basic-addon3>
< / div>
< / div>
< div class =form-group>
< label for =basic-url>描述< / label>
< / div>
< button type =submitclass =btn btn-defaultv-if =！newPost ['.key']v-on：click =addPost>添加商户< / button> ;
< / form>
< / div>
< / div>
< div class =panel panel-default>
<！ - 默认面板内容 - >
< div class =panel-heading>企业< / div>
<！ - 表 - >
< table class =table table-striped>
< tr>
企业名称< / th>
Vanity URL< / th>
Story< / th>
< th>动作< / th>
< / tr>
< tr v-for =post in posts：key =post ['.key']>
< td contenteditable v-model =newPost.title> {{post.title}}< / td>
< td> {{post.content}}< / td>
< td> {{post.story}}< / td>
< td>
< button v-on：click =editPost（post）type =buttonclass =btn btn-default btn-sm>< span class =glyphicon glyphicon-pencil隐藏= 真 >< /跨度>编辑< /按钮>
将按钮v-上：点击= removePost（后） 类型= 按钮 类= BTN BTN-危险BTN-SM ><跨度类= glyphicon glyphicon-垃圾 aria-隐藏= 真 >< /&跨度GT;删除< /按钮>
< / td>
< / tr>
< / table>
< / div>
< ul class =errors>
< / ul>
< / div>
I have a simple admin app that creates new businesses via form and adds them to a table. I have created methods to add and delete entries, but am not sure how to proceed creating an update method. The content is contenteditable and I want to save that on save button click. Please see my CodePen: http://codepen.io/Auzy/pen/177244afc7cb487905b927dd3a32ae61 To do this I use VueJS and Vuefire the following way (pardon the Bootstrap):
<!-- Table -->
<table class="table table-striped">
<tr>
<th>Business Name</th>
<th>Vanity URL</th>
<th>Story</th>
<th>Actions</th>
</tr>
<tr v-for="post in posts" :key="post['.key']">
<td contenteditable v-model="newPost.title">{{post.title}}</td>
<td>{{post.content}}</td>
<td>{{post.story}}</td>
<td>
<button v-on:click="removePost(post)" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit</button>
<button v-on:click="removePost(post)" type="button" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</button>
</td>
</tr>
</table>
</div>
</div>
And JS:
// Setup Firebase
let config = {
...firebase stuff...
}
let firebaseapp = firebase.initializeApp(config);
let db = firebaseapp.database();
let postsRef = db.ref('blog/posts')
// create Vue app
var app = new Vue({
// element to mount to
el: '#app',
// initial data
data: {
newPost: {
title: '',
content: '',
story: ''
}
},
// firebase binding
// https://github.com/vuejs/vuefire
firebase: {
posts: postsRef
},
// methods
methods: {
addPost: function () {
postsRef.push(this.newPost);
this.newPost.title = '';
this.newPost.content = '';
this.newPost.story = '';
},
removePost: function (post) {
postsRef.child(post['.key']).remove()
toastr.success('Business removed successfully')
}
}
})
解决方案 You have to use $bindAsArray for arrays and $bindAsObject for objects to bind firebase data to component data.
You can use $firebaseRefs which is provided by vuefire to update or modify the endpoints.
Here is the updated codepen.
I have made the following changes to your code.
// create Vue app
var app = new Vue({
// element to mount to
el: '#app',
// initial data
data: {
posts: [], // All the business post to display
newPost: {
title: '',
content: '',
story: ''
}
},
// methods
methods: {
addPost: function () {
postsRef.push(this.newPost);
this.newPost.title = '';
this.newPost.content = '';
this.newPost.story = '';
},
editPost: function(post) {
// Set post values to form
this.newPost = post
},
updatePost: function(post) {
const childKey = post['.key'];
/*
* Firebase doesn't accept speacial chars as value
* so delete `.key` property from the post
*/
delete post['.key'];
/*
* Set the updated post value
*/
this.$firebaseRefs.posts.child(childKey).set(post)
},
removePost: function (post) {
postsRef.child(post['.key']).remove()
toastr.success('Business removed successfully')
},
},
// Explicitly set binding data to firebase as an array.
created() {
this.$bindAsArray('posts', postsRef);
}
})
In the template:
<div id="app">
<ul class="nav nav-pills nav-justify">
<li role="presentation" class="active"><a href="#">Businesses</a></li>
<li role="presentation"><a href="#">Events</a></li>
<li role="presentation"><a href="#">Locations</a></li>
</ul>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Add a Business</h3>
</div>
<div class="panel-body">
<form id="form">
<div class="form-group">
<label for="exampleInputPassword1">Business Name</label>
<input v-model="newPost.title" type="text" class="form-control" id="exampleInputPassword1" placeholder="Business Name">
</div>
<div class="form-group">
<label for="basic-url">Vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">/businesses/</span>
<input v-model="newPost.content" type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
</div>
<div class="form-group">
<label for="basic-url">Description</label>
<textarea v-model="newPost.story" name="" id="" cols="30" rows="10"></textarea>
</div>
<button type="button" class="btn btn-default" v-if="newPost['.key']" v-on:click="updatePost(newPost)">Update</button>
<button type="submit" class="btn btn-default" v-if="!newPost['.key']" v-on:click="addPost">Add Business</button>
</form>
</div>
</div>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Businesses</div>
<!-- Table -->
<table class="table table-striped">
<tr>
<th>Business Name</th>
<th>Vanity URL</th>
<th>Story</th>
<th>Actions</th>
</tr>
<tr v-for="post in posts" :key="post['.key']">
<td contenteditable v-model="newPost.title">{{post.title}}</td>
<td>{{post.content}}</td>
<td>{{post.story}}</td>
<td>
<button v-on:click="editPost(post)" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit</button>
<button v-on:click="removePost(post)" type="button" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</button>
</td>
</tr>
</table>
</div>
<ul class="errors">
</ul>
</div>
这篇关于使用VueFire编辑Firebase数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
