Question

在我第一次使用Vue刺破Firebase之前，我从未使用过Firebase。

我使用Realtime Databas设置了Firebase并设置了项目，因此可以在.vue文件中使用以下代码发布

this.$http.post('https://MY_PROJECT_NAME.firebaseio.com/posts.json', {
                title: this.blog.title,
                body: this.blog.content,
                createdDate: this.$options.filters.fullMthDate(this.blog.publishDate),
                author: this.blog.author,
                active: true,
                closedDate: null,                
            }).then((response) => {
                this.$blogAdded = true;
                this.loading = false;
                this.$router.push('/');                
            }).catch((error) => {
                console.log(error);
            });

我似乎找不到答案的事情是如何在需要时更新此文档（例如，用户删除某项，我希望“活动”成为false）

我使用上面的代码是因为我正在使用以这种方式设置FireBase的网络忍者教程。

然后我在我的主要组件中使用get列出所有项目

this.$http.get('https://MY_PROJECT_NAME.firebaseio.com/posts.json').then(function(data) {
                return data.json();
            }).then(function(data) {
                var blogsArray = [];

                for (let key in data) {
                     const date = new Date(data[key].createdDate);
                     const todaysDate = new Date();

                    if (date <= todaysDate) {
                        data[key].id = key

                        blogsArray.push(data[key])
                    }
                }

                this.blogs = blogsArray;
                this.loading = false;
            });

这会将它们显示在我的网站上

当用户单击图块时，他们会转到一个页面，可以在其中“删除/取消”帖子，而我在这里被卡住了。下面是我用来显示所选项目的代码

data() {
        return {
            id: this.$route.params.id,
            blog: {},
            loading: false,
            closeModal: false,
            showModal: false
        };
    },

    beforeMount() {
        this.loading = true;            
    },

    created() {
        this.$http.get('https://MY_PROJECT_NAME.firebaseio.com/posts/' + this.id + '.json').then(function(data) {            
            return data.json();
        }).then(function(data) {
            this.blog = data;
            this.loading = false;
        });
    },

    methods: {
        showCloseBlogModal() {
            console.log(this.blog)
            VueEvent.$emit('show-delete-blog-modal', this.blog);
        }
    }

然后，当显示模式时，我在console.log

中得到以下内容

当他们使用以下方法单击“是”时，我需要将“有效”值更新为false

methods: {
    deleteBlog() {
        // CODE HERE WHEN CLICK 'YES' TO CANCEL
    }
}

无法使用VUE更新Firebase中的现有文档

0 个答案: