Vuejs 在 POST 成功回调后重置字段

Question

我在收到 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>

这是父组件

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

正如你在响应回调函数中看到的那样，我重置了 task.taskContent 值，但问题是字符串被毫无问题地发送到数据库，而在我有一个数组的根组件中没有更新存储所有这些字符串。我正在考虑使用观察者，但我不知道这是否是一个好的解决方案，您有什么建议吗？ Link 到 github 回购 https://github.com/Polenj86/vue-taskmanager

Answer 1

很清楚现在您已经发布了父组件。

您正在将 task 对象存储在父数组中。这不会是任务的副本，而是您将要清除的同一任务的参考。因此，当您稍后设置 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});

或者您可以只将任务名称字符串传递给父级并让父级创建对象。

Vuejs 在 POST 成功回调后重置字段

Vuejs reset fields after POST success callback

firebase

vue.js

vue-resource