How to update the view after an API call (Vue)
<p>I'm making a simple shopping cart system with Laravel and Vue. I can successfully add and remove items from the basket. However, when I remove items, I have to refresh the page in order to see the change reflected.</p>
<p>Here's my basket view:</p>
<pre><code>&lt;table class=&quot;table table-striped&quot;&gt;
    &lt;thead&gt;
        &lt;th&gt;Item&lt;/th&gt;
        &lt;th&gt;Price each&lt;/th&gt;
        &lt;th&gt;Quantity&lt;/th&gt;
        &lt;th&gt;Update&lt;/th&gt;
        &lt;th&gt;Delete&lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr v-for=&quot;item in basketItems&quot;&gt;
            &lt;td&gt;@{{ item.name }}&lt;/td&gt;
            &lt;td&gt;&amp;pound;@{{ item.price }}.00&lt;/td&gt;
            &lt;td&gt;@{{ item.quantity }}&lt;/td&gt;
            &lt;td&gt;&lt;button class=&quot;btn btn-primary btn-sm&quot;&gt;Update&lt;/button&gt;&lt;/td&gt;
            &lt;td&gt;&lt;button class=&quot;btn btn-secondary btn-sm&quot; v-on:click=&quot;removeItem(item.id)&quot;&gt;Delete&lt;/button&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
<p>Clicking the delete button calls this function in Vue:</p>
<pre><code> removeItem: function(id){
     this.$http.post('api/buy/removeItem', { id: id });
 }
</code></pre>
<p>Which then triggers this function in the controller:</p>
<pre><code>public function removeItem(Request $request){
     $id = $request-&gt;input('id');
     $this-&gt;cart-&gt;find($id)-&gt;remove();
}
</code></pre>
<p>This all works fine in the background, but the view naturally remains the same. How can I also remove the deleted item from the view?</p>