DEV Community 👩‍💻👨‍💻

Cover image for How to Delete Record in Laravel 9 with Inertia Vue 3
larainfo
larainfo

Posted on • Originally published at larainfo.com

How to Delete Record in Laravel 9 with Inertia Vue 3

In this short tutorial we will see how to delete record in laravel 9 using inertia vue 3. For this section we will use Vue 3 SFCs method .</p> <p><em>PostController.php</em><br> </p> <div class="highlight"><pre class="highlight php"><code><span class="cd">/** * Remove the specified resource from storage. * * @param \App\Models\Post $post * @return \Illuminate\Http\Response */</span> <span class="k">public</span> <span class="k">function</span> <span class="n">destroy</span><span class="p">(</span><span class="kt">Post</span> <span class="nv">$post</span><span class="p">)</span> <span class="p">{</span> <span class="nv">$post</span><span class="o">-&gt;</span><span class="nb">delete</span><span class="p">();</span> <span class="nb">sleep</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> <span class="k">return</span> <span class="nf">redirect</span><span class="p">()</span><span class="o">-&gt;</span><span class="nf">route</span><span class="p">(</span><span class="s1">'posts.index'</span><span class="p">)</span><span class="o">-&gt;</span><span class="nf">with</span><span class="p">(</span><span class="s1">'message'</span><span class="p">,</span> <span class="s1">'Post Delete Successfully'</span><span class="p">);</span> <span class="p">}</span> </code></pre></div> <p></p> <p><em>routes/web.php</em><br> </p> <div class="highlight"><pre class="highlight php"><code><span class="nc">Route</span><span class="o">::</span><span class="nb">delete</span><span class="p">(</span><span class="s1">'posts/{post}'</span><span class="p">,[</span><span class="nc">PostController</span><span class="o">::</span><span class="n">class</span><span class="p">,</span><span class="s1">'destroy'</span><span class="p">])</span><span class="o">-&gt;</span><span class="nf">name</span><span class="p">(</span><span class="s1">'posts.destroy'</span><span class="p">);</span> </code></pre></div> <p></p> <p><em>Posts/Index.vue</em><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt">&lt;script </span><span class="na">setup</span><span class="nt">&gt;</span> <span class="k">import</span> <span class="nx">BreezeAuthenticatedLayout</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@/Layouts/Authenticated.vue</span><span class="dl">"</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">Head</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@inertiajs/inertia-vue3</span><span class="dl">"</span><span class="p">;</span> <span class="k">import</span> <span class="nx">BreezeButton</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@/Components/Button.vue</span><span class="dl">"</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">Link</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@inertiajs/inertia-vue3</span><span class="dl">"</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">Inertia</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@inertiajs/inertia</span><span class="dl">"</span><span class="p">;</span> <span class="nx">defineProps</span><span class="p">({</span> <span class="na">posts</span><span class="p">:</span> <span class="p">{</span> <span class="na">type</span><span class="p">:</span> <span class="nb">Object</span><span class="p">,</span> <span class="na">default</span><span class="p">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">({}),</span> <span class="p">},</span> <span class="p">});</span> <span class="kd">function</span> <span class="nx">destroy</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="nx">confirm</span><span class="p">(</span><span class="dl">"</span><span class="s2">Are you sure you want to Delete</span><span class="dl">"</span><span class="p">))</span> <span class="p">{</span> <span class="nx">Inertia</span><span class="p">.</span><span class="k">delete</span><span class="p">(</span><span class="nx">route</span><span class="p">(</span><span class="dl">"</span><span class="s2">posts.destroy</span><span class="dl">"</span><span class="p">,</span> <span class="nx">id</span><span class="p">));</span> <span class="p">}</span> <span class="p">}</span> <span class="nt">&lt;/script&gt;</span> <span class="nt">&lt;template&gt;</span> <span class="nt">&lt;Head</span> <span class="na">title=</span><span class="s">"Post"</span> <span class="nt">/&gt;</span> <span class="nt">&lt;BreezeAuthenticatedLayout&gt;</span> <span class="nt">&lt;template</span> <span class="na">#header</span><span class="nt">&gt;</span> <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"text-xl font-semibold leading-tight text-gray-800"</span><span class="nt">&gt;</span> Posts <span class="nt">&lt;/h2&gt;</span> <span class="nt">&lt;/template&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"py-12"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mx-auto max-w-7xl sm:px-6 lg:px-8"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">v-if=</span><span class="s">"$page.props.flash.message"</span> <span class="na">class=</span><span class="s">"p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="nt">&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"font-medium"</span><span class="nt">&gt;</span> {{ $page.props.flash.message }} <span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"overflow-hidden bg-white shadow-sm sm:rounded-lg"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-6 bg-white border-b border-gray-200"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"relative overflow-x-auto shadow-md sm:rounded-lg"</span> <span class="nt">&gt;</span> <span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">"w-full text-sm text-left text-gray-500 dark:text-gray-400"</span> <span class="nt">&gt;</span> <span class="nt">&lt;thead</span> <span class="na">class=</span><span class="s">"text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"</span> <span class="nt">&gt;</span> <span class="nt">&lt;tr&gt;</span> <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"col"</span> <span class="na">class=</span><span class="s">"px-6 py-3"</span><span class="nt">&gt;</span>#<span class="nt">&lt;/th&gt;</span> <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"col"</span> <span class="na">class=</span><span class="s">"px-6 py-3"</span><span class="nt">&gt;</span> Post name <span class="nt">&lt;/th&gt;</span> <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"col"</span> <span class="na">class=</span><span class="s">"px-6 py-3"</span><span class="nt">&gt;</span> Slug <span class="nt">&lt;/th&gt;</span> <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"col"</span> <span class="na">class=</span><span class="s">"px-6 py-3"</span><span class="nt">&gt;</span> Created At <span class="nt">&lt;/th&gt;</span> <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"col"</span> <span class="na">class=</span><span class="s">"px-6 py-3"</span><span class="nt">&gt;</span> Edit <span class="nt">&lt;/th&gt;</span> <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"col"</span> <span class="na">class=</span><span class="s">"px-6 py-3"</span><span class="nt">&gt;</span> Delete <span class="nt">&lt;/th&gt;</span> <span class="nt">&lt;/tr&gt;</span> <span class="nt">&lt;/thead&gt;</span> <span class="nt">&lt;tbody&gt;</span> <span class="nt">&lt;tr</span> <span class="na">v-for=</span><span class="s">"post in posts"</span> <span class="na">:key=</span><span class="s">"post.id"</span> <span class="na">class=</span><span class="s">"bg-white border-b dark:bg-gray-800 dark:border-gray-700"</span> <span class="nt">&gt;</span> <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"row"</span> <span class="na">class=</span><span class="s">"px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"</span> <span class="nt">&gt;</span> {{ post.id }} <span class="nt">&lt;/th&gt;</span> <span class="nt">&lt;th</span> <span class="na">scope=</span><span class="s">"row"</span> <span class="na">class=</span><span class="s">"px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"</span> <span class="nt">&gt;</span> {{ post.name }} <span class="nt">&lt;/th&gt;</span> <span class="nt">&lt;td</span> <span class="na">class=</span><span class="s">"px-6 py-4"</span><span class="nt">&gt;</span> {{ post.slug }} <span class="nt">&lt;/td&gt;</span> <span class="nt">&lt;td</span> <span class="na">class=</span><span class="s">"px-6 py-4"</span><span class="nt">&gt;</span> {{ post.created_at }} <span class="nt">&lt;/td&gt;</span> <span class="nt">&lt;td</span> <span class="na">class=</span><span class="s">"px-6 py-4"</span><span class="nt">&gt;</span> <span class="nt">&lt;Link</span> <span class="na">:href=</span><span class="s">" route( 'post.edit', post.id ) "</span> <span class="na">class=</span><span class="s">"px-4 py-2 text-white bg-blue-600 rounded-lg"</span> <span class="nt">&gt;</span>Edit<span class="nt">&lt;/Link</span> <span class="nt">&gt;</span> <span class="nt">&lt;/td&gt;</span> <span class="nt">&lt;td</span> <span class="na">class=</span><span class="s">"px-6 py-4"</span><span class="nt">&gt;</span> <span class="nt">&lt;BreezeButton</span> <span class="na">class=</span><span class="s">"bg-red-600"</span> <span class="err">@</span><span class="na">click=</span><span class="s">"destroy(post.id)"</span> <span class="nt">&gt;</span> Delete <span class="nt">&lt;/BreezeButton&gt;</span> <span class="nt">&lt;/td&gt;</span> <span class="nt">&lt;/tr&gt;</span> <span class="nt">&lt;/tbody&gt;</span> <span class="nt">&lt;/table&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/BreezeAuthenticatedLayout&gt;</span> <span class="nt">&lt;/template&gt;</span> </code></pre></div> <p></p> <p>OR: You can also use inertia vue 3 Form helper.<br> </p> <div class="highlight"><pre class="highlight html"><code>import { useForm } from '@inertiajs/inertia-vue3' const form = useForm(); function destroy(id) { if (confirm("Are you sure you want to Delete")) { form.delete(route('posts.destroy', id)); } } </code></pre></div> <p></p> <p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40fpomps5079q7x8vpgq.png" alt="laravel 9 inertia delete record"></p> <p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lldy54rephu34qapxoeo.png" alt="delete record in Laravel 9 with Inertia Vue 3"></p>

Top comments (0)

🤔 Did you know?

 
✍️ Writing your own article is easy (we even support markdown)