在VueJS上更新Firebase值时行为异常的数据列表

Question

I'm having a really strange behavior on the list of data when I try to update a value on firebase.

I've putted an example of my code here: https://codepen.io/Raulmo/pen/BRMWNM?editors=1111

Here is my vueJS:

// Setup Firebase
let config = {
  databaseURL: "https://test-stack-de2e3.firebaseio.com"
};


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: {
        posts: [],
    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) {
            post.title = "changed"
            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);
    }
})

What is happening is that every time a press the edit button i've forced the value of post.title to change to another value and then update it on firebase, but when I do so on the first element it also changes the value of the last element of the list. So, I need to reload the page to get it right again.

Someone has any clue of what is causing it?

Answer 1

i have same problem too. But i think this can help you It look so stupid but it work for me GL updatePost: function(post) { this.$firebaseRefs.posts.child(post['.key']).child('title').set(post.title) this.$firebaseRefs.posts.child(post['.key']).child('content').set(post. content) this.$firebaseRefs.posts.child(post['.key']).child('story').set(post. story) },

Answer 2

You must use copy of the post

    editPost: function(post) {
        // Set post values to form
        // create a copy of the post
        this.newPost = {...post}
    },