更新DOMは、API要求後の結果をレンダリングする

Question

解決しよう：それは新しい状態に更新するような機能にthis.tasksの=のresp.dataを追加することで...

私は現在、単純なtodo-に取り組んでいますvuejsのリストアプリと私はapiのリクエストを行った後、円滑な方法でdomを更新する方法を探しています。私が変更の直後に変更を表示できる唯一の方法は、応答にlocation.reload（）を置くことです。私はいくつかの例やガイドを見てきました。人々は.bind（）でこれを行うことができるようですが、私のためには機能しません。

//deletePost works for displaying changes but i don't want the page to flash on every update 
deletePost(id) { 
    axios.delete(`http://localhost:3000/tasks/${id}`) 
    .then((resp) => { 
    console.log(resp.data) 
    location.reload(); 
    }) 
    .catch((err) => { 
    console.log(err) 
    }) 
}, 
    //this is how i've seen people doing it, but it's not working for me. 
    updatePost(selected, id) { 
    axios.put(`http://localhost:3000/tasks/${id}`,{ status: selected }) 
    .then(function(response){ 
     console.log('saved successfully') 
     }.bind(this)); 
    } 
}, 

Answer 1

あなたはあなたのVueコンポーネントにタスクの配列を持っています。 http要求を送信すると、サーバーからリソースが削除されますが、ローカルには削除されません。コンポーネント内部のリソースを削除するには、次のように例えば.then（）の部分でそれを行う必要があります：

data() return { 
    tasks: [] 
}, 

deletePost(id) { 
    axios.delete(`http://localhost:3000/tasks/${id}`) 
    .then((resp) => { 
    console.log(resp.data) 
    // Here we delete the task from the component locally 
    // Note that we only want to delete it if the request is successful 
    let index= this.tasks.find(task => task.id === id) 
    this.tasks.splice(index,1); 
    }) 
    .catch((err) => { 
    console.log(err) 
    }) 
}, 
    //this is how i've seen people doing it, but it's not working for me. 
    updatePost(selected, id) { 
    axios.put(`http://localhost:3000/tasks/${id}`,{ status: selected }) 
    .then(function(response){ 
     console.log('saved successfully') 
     }.bind(this)); 
    } 
}, 

Answer 2

おかげでこんなに早くここで私の最初のポストに返信するために、もちろん私はべきでした

data() { 
    return { 
     tasks: [], 
     formValue: '', 
     selected: '' 
    } 
    }, 
    created() { 
    this.fetchData() 
    }, 
    watch: { 
    '$route': 'fetchData', 
    }, 
    methods: { 
    fetchData() { 
     axios.get('http://localhost:3000/tasks') 
     .then((resp) => { 
     this.tasks = resp.data 
     console.log(resp.data) 
     }) 
     .catch((err) => { 
     console.log(err) 
     }) 
    }, 
    deletePost(id) { 
     axios.delete(`http://localhost:3000/tasks/${id}`) 
     .then((resp) => { 
     console.log(resp.data) 
     // Here we delete the task from the component locally 
     // Note that we only want to delete it if the request is successful 
     let index= this.tasks.find(task => task.id === id) 
     this.tasks.splice(index,1); 
     }) 
     .catch((err) => { 
     console.log(err) 
     }) 
    }, 
     //updates post status 
     updatePost(selected, id) { 
     axios.put(`http://localhost:3000/tasks/${id}`,{ status: selected }) 
     .then(function(response){ 
      console.log('saved successfully') 
      }.bind(this)); 
     } 
    }, 
    }