Firebase 成功后回调后Vuejs重置字段

我在POST请求后重置textarea字段时遇到一些问题。 这是我的组件代码

<template lang="pug">
    .col-sm-12
        h2 Add new Task
        hr
        .form-group
            textarea.form-control(v-model="task.taskContent")
        .form-group
            button.btn.btn-primary(@click="createNewTask") Add Task
</template>

<script>
export default {
    data() {
        return {
            task: {
                taskContent: ''
            }
        };
    },
    methods: {
        createNewTask() {
            if (this.task.taskContent.length > 0) {                              

                // Sending data to the server
                this.$http.post('https://vue-taskmanager.firebaseio.com/task.json', this.task)
                .then(response => {
                    console.log(response);                    
                    // Adding the new task to the main template list
                    this.$emit('taskWasCreated', this.task);
                    // Resetting textarea content
                    this.task.taskContent = '';  
                }, error => {
                    console.log(error);
                });                

            } else {
                alert("Sorry you can't create an empty task");
            }

        }
    }
}
</script>

col-sm-12
h2添加新任务
人力资源
.表格组
textarea.form控件（v-model=“task.taskContent”）
.表格组
button.btn.btn主（@click=“createNewTask”）添加任务
导出默认值{
数据（）{
返回{
任务：{
任务内容：“”
}
};
},
方法：{
createNewTask（）{
如果（this.task.taskContent.length>0）{
//正在向服务器发送数据
这是.$http.post（'https://vue-taskmanager.firebaseio.com/task.json，此任务）
。然后（响应=>{
控制台日志（响应）；
//将新任务添加到主模板列表
此.emit（'taskWasCreated'，this.task）；
//重置文本区域内容
this.task.taskContent=''；
}，错误=>{
console.log（错误）；
});                
}否则{
警报（“抱歉，您无法创建空任务”）；
}
}
}
}

这是父组件

<template lang="pug">           
    .container
        .row
            app-newtask(@taskWasCreated="addTask")
            app-taskswrapper(:tasks="tasksArr")
            app-footer

</template>


<script>
import { EventBus } from './main.js';
import UserRegistration from './components/user/UserRegistration.vue';
import TasksWrapper from './components/TasksWrapper.vue';
import NewTask from './components/NewTask.vue';
import Footer from './components/Footer.vue';
export default {
    data() {
        return {
            tasksArr: [
                'Just something to see'
            ]
        };
    },
    methods: {
        addTask(task) {
            this.tasksArr.push(task)
        }
    },
    // Listening on Events from Task.vue 
    created() {
        // Delete task from array
        EventBus.$on('taskWasDeleted', (taskIndex) => {
            this.tasksArr.splice(taskIndex, 1);
            // Delete task from db
            this.$http.delete('https://vue-taskmanager.firebaseio.com/task.json', this.task)
                .then(response => {
                        console.log(response);
                    }, error => {
                        console.log(error);
                    });
        });
        // Fetch tasks from db
        this.$http.get('https://vue-taskmanager.firebaseio.com/task.json')
            .then(response => {
                return response.json();
            })
            .then(task => {
                const resultsArray = [];
                for (let key in task) {
                    resultsArray.push(task[key]);
                }
                this.tasksArr = resultsArray;
            });      
    },
    components: {
        'app-taskswrapper': TasksWrapper,
        'app-newtask': NewTask,
        'app-footer': Footer,
        'app-userregistration': UserRegistration
    }

}
</script>

.集装箱
一行
app newtask（@taskWasCreated=“addTask”）
应用程序taskswrapper（：tasks=“tasksar”）
应用程序页脚
从“/main.js”导入{EventBus}；
从“./components/user/UserRegistration.vue”导入用户注册；
从“./components/TasksWrapper.vue”导入TasksWrapper；
从“/components/NewTask.vue”导入新任务；
从“./components/Footer.vue”导入页脚；
导出默认值{
数据（）{
返回{
任务：[
“只是想看看”
]
};
},
方法：{
添加任务（任务）{
this.tasksar.push（任务）
}
},
//侦听Task.vue中的事件
创建（）{
//从数组中删除任务
EventBus.$on（'taskWasDeleted'，（taskIndex）=>{
这个.tasksArr.splice（任务索引，1）；
//从数据库中删除任务
这是。$http.delete（'https://vue-taskmanager.firebaseio.com/task.json，此任务）
。然后（响应=>{
控制台日志（响应）；
}，错误=>{
console.log（错误）；
});
});
//从数据库获取任务
这是。$http.get（'https://vue-taskmanager.firebaseio.com/task.json')
。然后（响应=>{
返回response.json（）；
})
.然后（任务=>{
const resultsArray=[]；
for（让输入任务）{
resultsArray.push（任务[键]）；
}
this.tasksar=resultsArray；
});      
},
组成部分：{
“应用程序taskswrapper”：taskswrapper，
“应用程序新任务”：新任务，
“应用程序页脚”：页脚，
“应用程序用户注册”：用户注册
}
}

正如您在响应回调函数中看到的那样，我重置了task.taskContent值，但问题是字符串发送到db时没有出现问题，而在根组件中没有更新，在根组件中，我有一个存储所有这些字符串的数组。 我想用一个观察者，但我不知道这是否是一个好的解决方案，你有什么建议吗？

---

链接到github repo

现在，您已经发布了父组件，现在很清楚发生了什么

您正在父级数组中存储

任务
对象。这不是任务的副本，而是要清除的同一任务的引用。因此，当您稍后设置
this.task.taskContent=''
时，您也在更改父数组中的任务

考虑这一点：

var task_holder_array = []
var task = {name: "mark"}
task_holder_array.push(task)

console.log("array before: ", task_holder_array)

task.name = ""

console.log("array after: ", task_holder_array)

您需要以某种方式创建一个新的任务对象以推入父对象的数组。有很多方法可以做到这一点。例如：

this.$emit('taskWasCreated', {name: this.task.name});

或者，您可以将任务名称字符串传递给父级，让父级创建对象。
如果不看到父级组件，就很难判断出问题所在。当发出
taskWasCreated
时，父级上运行的是什么代码？您只是在存储
task.taskContent
还是在父数组中存储整个
task
对象？@MarkM嗨，我编辑了这个问题并链接了一个repo，如果您想全部检查的话