使用 VueFire 编辑 Firebase 数据

Question

我有一个简单的 admin 应用程序，它通过表单创建新的 businesses 并将它们添加到表中。我已经创建了添加和删除条目的方法，但不确定如何继续创建更新方法。内容是 contenteditable，我想在单击保存按钮时保存它。请查看我的 CodePen：http://codepen.io/Auzy/pen/177244afc7cb487905b927dd3a32ae61 为此，我以以下方式使用 VueJS 和 Vuefire（请原谅 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>

还有 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')
    }
  }
})

Answer 1

您必须将 $bindAsArray 用于数组，将 $bindAsObject 用于对象，以将 Firebase 数据绑定到组件数据。

您可以使用vuefire 提供的$firebaseRefs 来更新或修改端点。

这是更新后的codepen。

我对您的代码进行了以下更改。

// 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);
    }
})

在模板中：

<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>