VuejsはPOST成功コールバック

Question

後、私はPOSTリクエストの後にテキストエリアのフィールドをリセットするいくつかの問題を抱えているフィールドをリセットします。 これは、応答コールバック関数内で見ることができるようにこれは私がtask.taskContent値をリセットしますが、問題は、文字列が送られていることである親コンポーネント

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

である私のコンポーネントのコード

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

ですdbには問題はありませんが、これらの文字列をすべて格納している配列を持つルートコンポーネントでは更新されません。 私はウォッチャーの使用について考えていましたが、それが良い解決策であるかどうかわかりません。何か提案がありますか？ 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}); 

それとも、ただ親にタスク名の文字列を渡すと、親オブジェクトを作成してみましょうことができます。