CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel Bootcamp</title>  <meta name="title" content="Laravel Bootcamp - Learn the PHP Framework for Web Artisans"> <meta name="description" content="Together let's walk through building and deploying a modern Laravel application from scratch.">  <meta property="og:type" content="website"> <meta property="og:url" content="https://bootcamp.laravel.com/"> <meta property="og:title" content="Laravel Bootcamp - Learn the PHP Framework for Web Artisans"> <meta property="og:description" content="Together let's walk through building and deploying a modern Laravel application from scratch."> <meta property="og:image" content="https://bootcamp.laravel.com/img/og-image.jpg">  <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://bootcamp.laravel.com/"> <meta property="twitter:title" content="Laravel - Learn the PHP Framework for Web Artisans"> <meta property="twitter:description" content="Together let's walk through building and deploying a modern Laravel application from scratch."> <meta property="twitter:image" content="https://bootcamp.laravel.com/img/og-image.jpg">  <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"> <link rel="manifest" href="/img/favicon/site.webmanifest"> <link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#ff2d20"> <link rel="shortcut icon" href="/img/favicon/favicon.ico"> <meta name="msapplication-TileColor" content="#ff2d20"> <meta name="msapplication-config" content="/img/favicon/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <meta name="color-scheme" content="light">  <link rel="stylesheet" href="https://use.typekit.net/ins2wgm.css">  <link rel="stylesheet" href="https://bootcamp.laravel.com/build/assets/app.1fe37668.css" /><script type="module" src="https://bootcamp.laravel.com/build/assets/app.f1116ac0.js"></script>  <script src="https://cdn.usefathom.com/script.js" data-site="KRRQTWHM" defer></script>  <script> window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { if (localStorage.theme === 'system') { if (e.matches) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } } }); function updateTheme() { if (!('theme' in localStorage)) { localStorage.theme = 'system'; } switch (localStorage.theme) { case 'system': if (window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } document.documentElement.setAttribute('color-theme', 'system'); break; case 'dark': document.documentElement.classList.add('dark'); document.documentElement.setAttribute('color-theme', 'dark'); break; case 'light': document.documentElement.classList.remove('dark'); document.documentElement.setAttribute('color-theme', 'light'); break; } } updateTheme(); </script> </head> <body x-data="{ navIsOpen: false }" class="font-sans text-gray-900 antialiased" > <a id="skip-to-content-link" href="#main-content" class="absolute bg-gray-100 px-4 py-2 top-3 left-3 text-gray-700 shadow-xl" > Skip to content </a> <div class="min-h-screen dark:bg-dark-700"> <div class="relative lg:flex lg:items-start"> <aside id="sidebar" class="min-h-screen hidden fixed top-0 bottom-0 left-0 z-20 h-full w-16 bg-gradient-to-b from-gray-100 to-white transition-all duration-300 overflow-hidden lg:sticky lg:w-80 lg:shrink-0 lg:flex lg:flex-col lg:justify-end lg:items-end 2xl:max-w-lg 2xl:w-full dark:from-dark-800 dark:to-dark-700" > <div class="relative min-h-0 flex-1 flex flex-col xl:w-80"> <a href="/" class="flex items-center py-8 px-4 lg:px-8 xl:px-16"> <img class="w-8 h-8 shrink-0 transition-all duration-300 lg:w-12 lg:h-12" :class="{ 'w-12 h-12': navIsOpen }" src="/img/logomark.min.svg" alt="Laravel" width="50" height="52" > Bootcamp </a> <div class="overflow-y-auto overflow-x-hidden px-4 lg:overflow-hidden lg:px-8 xl:px-16"> <nav id="indexed-nav" class="hidden lg:block lg:mt-4"> <div class="docs_sidebar"> <ul> <li> <h2><a id="introduction" href="#introduction" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/introduction">Introduction</a></h2> </li> <li> <h2><a id="build-chirper-with-blade" href="#build-chirper-with-blade" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Blade</h2> <ul> <li> <a href="/blade/installation">Installation</a> </li> <li> <a href="/blade/creating-chirps">Creating Chirps</a> </li> <li> <a href="/blade/showing-chirps">Showing Chirps</a> </li> <li> <a href="/blade/editing-chirps">Editing Chirps</a> </li> <li> <a href="/blade/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/blade/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="build-chirper-with-livewire" href="#build-chirper-with-livewire" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Livewire</h2> <ul> <li> <a href="/livewire/installation">Installation</a> </li> <li> <a href="/livewire/creating-chirps">Creating Chirps</a> </li> <li> <a href="/livewire/showing-chirps">Showing Chirps</a> </li> <li> <a href="/livewire/editing-chirps">Editing Chirps</a> </li> <li> <a href="/livewire/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/livewire/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="build-chirper-with-inertia" href="#build-chirper-with-inertia" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Inertia</h2> <ul> <li> <a href="/inertia/installation">Installation</a> </li> <li> <a href="/inertia/creating-chirps">Creating Chirps</a> </li> <li> <a href="/inertia/showing-chirps">Showing Chirps</a> </li> <li> <a href="/inertia/editing-chirps">Editing Chirps</a> </li> <li> <a href="/inertia/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/inertia/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="deploying" href="#deploying" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/deploying">Deploying</a></h2> </li> <li> <h2><a id="conclusion" href="#conclusion" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/conclusion">Conclusion</a></h2> </li> </ul> </div> </nav> </div> <div class="flex-grow flex flex-col justify-end"> <div class="hidden 2xl:block mb-12 pl-16"> <svg x-data="{ initializeAnimation: false, init() { setTimeout(() => { this.initializeAnimation = true; }, 0); }, }" :class="initializeAnimation ? 'animate-cube' : ''" class="text-red-600 ml-8" width="46" height="53" viewBox="0 0 46 53" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="m23.102 1 22.1 12.704v25.404M23.101 1l-22.1 12.704v25.404" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path d="m45.202 39.105-22.1 12.702L1 39.105" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path transform="matrix(.86698 .49834 .00003 1 1 13.699)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86698 -.49834 -.00003 1 23.102 26.402)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86701 -.49829 .86701 .49829 1 13.702)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.491H0z"/> </svg> <svg x-data="{ initializeAnimation: false, init() { setTimeout(() => { this.initializeAnimation = true; }, 2000); }, }" :class="initializeAnimation ? 'animate-cube' : ''" class="text-red-600 mt-6 ml-32" width="46" height="53" viewBox="0 0 46 53" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="m23.102 1 22.1 12.704v25.404M23.101 1l-22.1 12.704v25.404" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path d="m45.202 39.105-22.1 12.702L1 39.105" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path transform="matrix(.86698 .49834 .00003 1 1 13.699)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86698 -.49834 -.00003 1 23.102 26.402)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86701 -.49829 .86701 .49829 1 13.702)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.491H0z"/> </svg> <svg x-data="{ initializeAnimation: false, init() { setTimeout(() => { this.initializeAnimation = true; }, 1000); }, }" :class="initializeAnimation ? 'animate-cube' : ''" class="text-red-600 mt-12" width="46" height="53" viewBox="0 0 46 53" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="m23.102 1 22.1 12.704v25.404M23.101 1l-22.1 12.704v25.404" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path d="m45.202 39.105-22.1 12.702L1 39.105" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path transform="matrix(.86698 .49834 .00003 1 1 13.699)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86698 -.49834 -.00003 1 23.102 26.402)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86701 -.49829 .86701 .49829 1 13.702)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.491H0z"/> </svg> </div> </div> </div> </aside> <header id="header" class="lg:hidden" @keydown.window.escape="navIsOpen = false" @click.away="navIsOpen = false" > <div class="relative mx-auto w-full py-10 bg-white transition duration-200 dark:bg-dark-700"> <div class="mx-auto px-8 sm:px-16 flex items-center justify-between"> <a href="/" class="flex items-center"> <img class="" src="/img/logomark.min.svg" alt="Laravel"> Bootcamp </a> <div class="flex-1 flex items-center justify-end"> <button id="header__sun" onclick="toSystemMode()" title="Switch to system theme" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <circle cx="12" cy="12" r="4"></circle> <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path> </svg> </button> <button id="header__moon" onclick="toLightMode()" title="Switch to light mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" /> </svg> </button> <button id="header__indeterminate" onclick="toDarkMode()" title="Switch to dark mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z" /> </svg> </button> <button class="ml-2 relative w-10 h-10 p-2 text-red-600 lg:hidden focus:outline-none focus:shadow-outline" aria-label="Menu" @click.prevent="navIsOpen = !navIsOpen"> <svg x-show="! navIsOpen" x-transition.opacity class="absolute inset-0 mt-2 ml-2 w-6 h-6" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg> <svg x-show="navIsOpen" x-transition.opacity x-cloak class="absolute inset-0 mt-2 ml-2 w-6 h-6" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> </button> </div> </div> </div> <div x-show="navIsOpen" x-transition:enter="duration-150" x-transition:leave="duration-100 ease-in" x-cloak > <nav x-show="navIsOpen" x-cloak class="absolute w-full transform origin-top shadow-sm z-10" x-transition:enter="duration-150 ease-out" x-transition:enter-start="opacity-0 -translate-y-8 scale-75" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 -translate-y-8 scale-75" > <div class="relative p-8 bg-white docs_sidebar dark:bg-dark-600"> <ul> <li> <h2><a id="introduction" href="#introduction" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/introduction">Introduction</a></h2> </li> <li> <h2><a id="build-chirper-with-blade" href="#build-chirper-with-blade" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Blade</h2> <ul> <li> <a href="/blade/installation">Installation</a> </li> <li> <a href="/blade/creating-chirps">Creating Chirps</a> </li> <li> <a href="/blade/showing-chirps">Showing Chirps</a> </li> <li> <a href="/blade/editing-chirps">Editing Chirps</a> </li> <li> <a href="/blade/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/blade/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="build-chirper-with-livewire" href="#build-chirper-with-livewire" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Livewire</h2> <ul> <li> <a href="/livewire/installation">Installation</a> </li> <li> <a href="/livewire/creating-chirps">Creating Chirps</a> </li> <li> <a href="/livewire/showing-chirps">Showing Chirps</a> </li> <li> <a href="/livewire/editing-chirps">Editing Chirps</a> </li> <li> <a href="/livewire/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/livewire/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="build-chirper-with-inertia" href="#build-chirper-with-inertia" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Inertia</h2> <ul> <li> <a href="/inertia/installation">Installation</a> </li> <li> <a href="/inertia/creating-chirps">Creating Chirps</a> </li> <li> <a href="/inertia/showing-chirps">Showing Chirps</a> </li> <li> <a href="/inertia/editing-chirps">Editing Chirps</a> </li> <li> <a href="/inertia/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/inertia/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="deploying" href="#deploying" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/deploying">Deploying</a></h2> </li> <li> <h2><a id="conclusion" href="#conclusion" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/conclusion">Conclusion</a></h2> </li> </ul> </div> </nav> </div> </header> <section class="flex-1 dark:bg-dark-700"> <div class="px-8 sm:px-16 lg:px-24"> <div class="max-w-screen-lg flex flex-col items-end transition-colors dark:border-gray-700 lg:mt-8 lg:flex-row-reverse"> <div class="fixed top-8 hidden lg:flex items-center justify-center"> <button id="header__sun" onclick="toSystemMode()" title="Switch to system theme" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <circle cx="12" cy="12" r="4"></circle> <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path> </svg> </button> <button id="header__moon" onclick="toLightMode()" title="Switch to light mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" /> </svg> </button> <button id="header__indeterminate" onclick="toDarkMode()" title="Switch to dark mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z" /> </svg> </button> </div> </div> <section class="pt-8 pb-8 md:pt-16 md:pb-16 flex"> <section class="docs_main flex-1 max-w-full"> <div id="main-content"> <div class="prose dark:prose-invert relative"> <aside class="table-of-contents-sidebar-wrapper not-prose"><aside class="table-of-contents-sidebar not-prose"><h2>On this page</h2><ul class="table-of-contents"> <li> <a href="#updating-our-component">Updating our component</a> </li> <li> <a href="#authorization">Authorization</a> </li> <li> <a href="#testing-it-out">Testing it out</a> </li> </ul></aside></aside> <h1>06. Deleting Chirps</h1> Sometimes no amount of editing can fix a message, so let's give our users the ability to delete their Chirps. Hopefully you're starting to get the hang of things now. We think you'll be impressed how quickly we can add this feature. <h2><a id="updating-our-component" href="#updating-our-component" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Updating our component</h2> To get started, let's update our <code>chirp.list</code> Livewire component to have a delete button and add an action to delete the Chirp when the button is clicked: <div class="tabbed-code" data-group="655204be61eaf99ca592616db15810a6"> <div class="tabbed-code-nav"> <button class="tabbed-code-nav-button active" data-tab="Class" onClick="setTab('Class', '655204be61eaf99ca592616db15810a6')">Class</button> <button class="tabbed-code-nav-button" data-tab="Functional" onClick="setTab('Functional', '655204be61eaf99ca592616db15810a6')">Functional</button> </div> <div class="tabbed-code-body"> <div class="code-container active" data-tab="Class"> <div class="code-container-filename">resources/views/livewire/chirps/list.blade.php</div> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight has-add-lines has-diff-lines has-summaries' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'> <?php</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'>  </div><div class='line'> use App\Models\Chirp;</div><div class='line'> use Illuminate\Database\Eloquent\Collection;</div><div class='line'> use Livewire\Attributes\On;</div><div class='line'> use Livewire\Volt\Component;</div><div class='line'>  </div></details><div class='line'> new class extends Component</div><div class='line'> {</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> public Collection $chirps;</div><div class='line'>  </div><div class='line'> public ?Chirp $editing = null;</div><div class='line'>  </div><div class='line'> public function mount(): void</div><div class='line'> {</div><div class='line'> $this->getChirps();</div><div class='line'> }</div><div class='line'>  </div><div class='line'> #[On('chirp-created')]</div><div class='line'> public function getChirps(): void</div><div class='line'> {</div><div class='line'> $this->chirps = Chirp::with('user')</div><div class='line'> ->latest()</div><div class='line'> ->get();</div><div class='line'> }</div><div class='line'>  </div><div class='line'> public function edit(Chirp $chirp): void</div><div class='line'> {</div><div class='line'> $this->editing = $chirp;</div><div class='line'>  </div><div class='line'> $this->getChirps();</div><div class='line'> }</div><div class='line'>  </div><div class='line'> #[On('chirp-edit-canceled')]</div><div class='line'> #[On('chirp-updated')]</div><div class='line'> public function disableEditing(): void</div><div class='line'> {</div><div class='line'> $this->editing = null;</div><div class='line'>  </div><div class='line'> $this->getChirps();</div><div class='line'> } </div></details><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ public function delete(Chirp $chirp): void</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ {</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ $this->authorize('delete', $chirp);</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ $chirp->delete();</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ $this->getChirps();</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ } </div><div class='line'> }; ?></div><div class='line'>  </div><div class='line'> <div class="mt-6 bg-white shadow-sm rounded-lg divide-y"></div><div class='line'> @foreach ($chirps as $chirp)</div><div class='line'> <div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}"></div><div class='line'> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"></div><div class='line'> <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></div><div class='line'> </svg></div><div class='line'> <div class="flex-1"></div><div class='line'> <div class="flex justify-between items-center"></div><div class='line'> <div></div><div class='line'> <span class="text-gray-800">{{ $chirp->user->name }}</span></div><div class='line'> <small class="ml-2 text-sm text-gray-600">{{ $chirp->created_at->format('j M Y, g:i a') }}</small></div><div class='line'> @unless ($chirp->created_at->eq($chirp->updated_at))</div><div class='line'> <small class="text-sm text-gray-600"> &middot; {{ __('edited') }}</small></div><div class='line'> @endunless</div><div class='line'> </div></div><div class='line'> @if ($chirp->user->is(auth()->user()))</div><div class='line'> <x-dropdown></div><div class='line'> <x-slot name="trigger"></div><div class='line'> <button></div><div class='line'> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor"></div><div class='line'> <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" /></div><div class='line'> </svg></div><div class='line'> </button></div><div class='line'> </x-slot></div><div class='line'> <x-slot name="content"></div><div class='line'> <x-dropdown-link wire:click="edit({{ $chirp->id }})"></div><div class='line'> {{ __('Edit') }}</div><div class='line'> </x-dropdown-link></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <x-dropdown-link wire:click="delete({{ $chirp->id }})" wire:confirm="Are you sure to delete this chirp?"> </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ {{ __('Delete') }}</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </x-dropdown-link> </div><div class='line'> </x-slot></div><div class='line'> </x-dropdown></div><div class='line'> @endif</div><div class='line'> </div></div><div class='line'> <p class="mt-4 text-lg text-gray-900">{{ $chirp->message }}</p></div><div class='line'> @if ($chirp->is($editing))</div><div class='line'> <livewire:chirps.edit :chirp="$chirp" :key="$chirp->id" /></div><div class='line'> @else</div><div class='line'> <p class="mt-4 text-lg text-gray-900">{{ $chirp->message }}</p></div><div class='line'> @endif</div><div class='line'> </div></div><div class='line'> </div></div><div class='line'> @endforeach</div><div class='line'> </div></div></code></pre> </div> <div class="code-container" data-tab="Functional"> <div class="code-container-filename">resources/views/livewire/chirps/list.blade.php</div> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight has-add-lines has-diff-lines has-summaries' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'> <?php</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> use App\Models\Chirp;</div><div class='line'> use function Livewire\Volt\{on, state};</div><div class='line'>  </div><div class='line'> $getChirps = fn () => $this->chirps = Chirp::with('user')->latest()->get();</div><div class='line'>  </div><div class='line'> $disableEditing = function () {</div><div class='line'> $this->editing = null;</div><div class='line'>  </div><div class='line'> return $this->getChirps();</div><div class='line'> };</div><div class='line'>  </div><div class='line'> state(['chirps' => $getChirps, 'editing' => null]);</div><div class='line'>  </div><div class='line'> on([</div><div class='line'> 'chirp-created' => $getChirps,</div><div class='line'> 'chirp-updated' => $disableEditing,</div><div class='line'> 'chirp-edit-canceled' => $disableEditing,</div><div class='line'> ]);</div><div class='line'>  </div><div class='line'> $edit = function (Chirp $chirp) {</div><div class='line'> $this->editing = $chirp;</div><div class='line'>  </div><div class='line'> $this->getChirps();</div><div class='line'> }; </div></details><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+$delete = function (Chirp $chirp) {</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ $this->authorize('delete', $chirp);</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ $chirp->delete();</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ $this->getChirps();</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+}; </div><div class='line'>  </div><div class='line'> ?></div><div class='line'>  </div><div class='line'> <div class="mt-6 bg-white shadow-sm rounded-lg divide-y"></div><div class='line'> @foreach ($chirps as $chirp)</div><div class='line'> <div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}"></div><div class='line'> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"></div><div class='line'> <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></div><div class='line'> </svg></div><div class='line'> <div class="flex-1"></div><div class='line'> <div class="flex justify-between items-center"></div><div class='line'> <div></div><div class='line'> <span class="text-gray-800">{{ $chirp->user->name }}</span></div><div class='line'> <small class="ml-2 text-sm text-gray-600">{{ $chirp->created_at->format('j M Y, g:i a') }}</small></div><div class='line'> @unless ($chirp->created_at->eq($chirp->updated_at))</div><div class='line'> <small class="text-sm text-gray-600"> &middot; {{ __('edited') }}</small></div><div class='line'> @endunless</div><div class='line'> </div></div><div class='line'> @if ($chirp->user->is(auth()->user()))</div><div class='line'> <x-dropdown></div><div class='line'> <x-slot name="trigger"></div><div class='line'> <button></div><div class='line'> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor"></div><div class='line'> <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" /></div><div class='line'> </svg></div><div class='line'> </button></div><div class='line'> </x-slot></div><div class='line'> <x-slot name="content"></div><div class='line'> <x-dropdown-link wire:click="edit({{ $chirp->id }})"></div><div class='line'> {{ __('Edit') }}</div><div class='line'> </x-dropdown-link></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <x-dropdown-link wire:click="delete({{ $chirp->id }})" wire:confirm="Are you sure to delete this chirp?"> </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ {{ __('Delete') }}</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </x-dropdown-link> </div><div class='line'> </x-slot></div><div class='line'> </x-dropdown></div><div class='line'> @endif</div><div class='line'> </div></div><div class='line'> <p class="mt-4 text-lg text-gray-900">{{ $chirp->message }}</p></div><div class='line'> @if ($chirp->is($editing))</div><div class='line'> <livewire:chirps.edit :chirp="$chirp" :key="$chirp->id" /></div><div class='line'> @else</div><div class='line'> <p class="mt-4 text-lg text-gray-900">{{ $chirp->message }}</p></div><div class='line'> @endif</div><div class='line'> </div></div><div class='line'> </div></div><div class='line'> @endforeach</div><div class='line'> </div></div></code></pre> </div> </div> </div> <h2><a id="authorization" href="#authorization" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Authorization</h2> As with editing, we only want our Chirp authors to be able to delete their Chirps, so let's update the <code>delete</code> method in our <code>ChirpPolicy</code> class: <div class="code-container"> <div class="code-container-filename">app/Policies/ChirpPolicy.php</div> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight has-add-lines has-remove-lines has-diff-lines has-summaries' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'> <?php</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> namespace App\Policies;</div><div class='line'>  </div><div class='line'> use App\Models\Chirp;</div><div class='line'> use App\Models\User;</div><div class='line'> use Illuminate\Auth\Access\HandlesAuthorization;</div><div class='line'>  </div></details><div class='line'> class ChirpPolicy</div><div class='line'> {</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> use HandlesAuthorization;</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Determine whether the user can view any models.</div><div class='line'> */</div><div class='line'> public function viewAny(User $user): bool</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Determine whether the user can view the model.</div><div class='line'> */</div><div class='line'> public function view(User $user, Chirp $chirp): bool</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Determine whether the user can create models.</div><div class='line'> */</div><div class='line'> public function create(User $user): bool</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Determine whether the user can update the model.</div><div class='line'> */</div><div class='line'> public function update(User $user, Chirp $chirp): bool</div><div class='line'> {</div><div class='line'> return $chirp->user()->is($user);</div><div class='line'> }</div><div class='line'>  </div></details><div class='line'> /**</div><div class='line'> * Determine whether the user can delete the model.</div><div class='line'> */</div><div class='line'> public function delete(User $user, Chirp $chirp): bool</div><div class='line'> {</div><div class='line line-remove line-has-background' style='background-color: #ef535033'>- //</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ return $this->update($user, $chirp);</div><div class='line'> }</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> /**</div><div class='line'> * Determine whether the user can restore the model.</div><div class='line'> */</div><div class='line'> public function restore(User $user, Chirp $chirp): bool</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Determine whether the user can permanently delete the model.</div><div class='line'> */</div><div class='line'> public function forceDelete(User $user, Chirp $chirp): bool</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div></details><div class='line'> }</div></code></pre> </div> Rather than repeating the logic from the <code>update</code> method, we can define the same logic by calling the <code>update</code> method from our <code>delete</code> method. Anyone that is authorized to update a Chirp will now be authorized to delete it as well. <h2><a id="testing-it-out" href="#testing-it-out" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Testing it out</h2> If you Chirped anything you weren't happy with, try deleting it! <img src="/img/screenshots/chirp-delete-blade.png" alt="Deleting a chirp" class="rounded-lg border dark:border-none shadow-lg" /> <a href="/livewire/notifications-and-events">Continue to notifications & events...</a><script> function setTab(tab, group, save) { save = typeof save === 'undefined' ? true : save document .querySelectorAll(`.tabbed-code[data-group="${group}"] .tabbed-code-nav-button`) .forEach(el => el.classList.remove('active')) document .querySelectorAll(`.tabbed-code[data-group="${group}"] .code-container`) .forEach(el => el.classList.remove('active')) document .querySelectorAll(`.tabbed-code[data-group="${group}"] [data-tab="${tab}"]`) .forEach(el => el.classList.add('active')) if (save) { saveTab(tab, group) } } function getTabs() { try { return JSON.parse(localStorage.tabs) } catch { return {} } } function saveTab(tab, group) { localStorage.tabs = JSON.stringify({ ...getTabs(), [group]: tab, }) } function restoreTabs() { Object.entries(getTabs()).forEach(([group, tab]) => setTab(tab, group, false)) } restoreTabs() </script> </div> <script> // Set the active navigation state... Array.from(document.querySelectorAll('#header a, #sidebar a')).forEach(link => { if (link.hostname === location.hostname && (link.pathname === location.pathname || (link.pathname === '/introduction' && location.pathname === '/')) ) { link.classList.add('active') if (link.parentNode.tagName === 'LI') { link.parentNode.parentNode.parentNode.classList.add('sub--on') } } }) // Make the navigation headings expandable... Array.from(document.querySelectorAll('.docs_sidebar h2')).forEach(el => { if (el.children.length > 1) { return } el.addEventListener('click', (e) => { const active = el.parentNode.classList.contains('sub--on'); [...document.querySelectorAll('.docs_sidebar ul li')].forEach(el => el.classList.remove('sub--on')); if (! active) { el.parentNode.classList.add('sub--on'); } }) }) // Highlight the active section in the table of contents... function setActiveTableOfContents () { const links = Array.from(document.querySelectorAll('.table-of-contents a')) const lastVisible = links .slice() .reverse() .find(link => { const el = document.querySelector(link.hash) return el.getBoundingClientRect().top <= 56; }) ?? links[0] links.forEach(link => { if (link === lastVisible) { link.classList.add('active') } else { link.classList.remove('active') } }) } setActiveTableOfContents() window.addEventListener('scroll', setActiveTableOfContents, { passive: true }) </script> </div> </section> </section> </div> </section> </div> <footer class="relative mt-12 pt-12 bg-gradient-to-b from-gray-50 to-white dark:from-dark-800 dark:to-dark-700"> <div class="max-w-screen-2xl mx-auto w-full px-8"> <div> <a href="https://laravel.com" class="inline-flex"> <img class="h-14" src="/img/logo.min.svg" alt="Laravel" loading="lazy"> </a> </div> <div class="mt-6 sm:mt-12"> Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel attempts to take the pain out of development by easing common tasks used in most web projects. <ul class="mt-6 flex items-center space-x-3"> <li> <a href="https://twitter.com/laravelphp"> <img id="footer__twitter_dark" class="hidden dark:inline-block w-6 h-6" src="/img/social/twitter.dark.min.svg" alt="Twitter" loading="lazy" width="24" height="20"> <img id="footer__twitter" class="inline-block dark:hidden w-6 h-6" src="/img/social/twitter.min.svg" alt="Twitter" loading="lazy" width="24" height="20"> </a> </li> <li> <a href="https://github.com/laravel"> <img id="footer__github_dark" class="hidden dark:inline-block w-6 h-6" src="/img/social/github.dark.min.svg" alt="GitHub" loading="lazy" width="24" height="24"> <img id="footer__github" class="inline-block dark:hidden w-6 h-6" src="/img/social/github.min.svg" alt="GitHub" loading="lazy" width="24" height="24"> </a> </li> <li> <a href="https://discord.gg/mPZNm7A"> <img id="footer__discord_dark" class="hidden dark:inline-block w-6 h-6" src="/img/social/discord.dark.min.svg" alt="Discord" loading="lazy" width="21" height="24"> <img id="footer__discord" class="inline-block dark:hidden w-6 h-6" src="/img/social/discord.min.svg" alt="Discord" loading="lazy" width="21" height="24"> </a> </li> <li> <a href="https://www.youtube.com/laravelphp"> <img id="footer__youtube_dark" class="hidden dark:inline-block w-6 h-6" src="/img/social/youtube.dark.min.svg" alt="YouTube" loading="lazy" width="169" height="150"> <img id="footer__youtube" class="inline-block dark:hidden w-6 h-6" src="/img/social/youtube.min.svg" alt="YouTube" loading="lazy" width="169" height="150"> </a> </li> </ul> </div> <div class="mt-10 border-t pt-6 pb-16 border-gray-200 dark:border-dark-500"> Laravel is a Trademark of Laravel Holdings Inc. Copyright © Laravel Holdings Inc. Code highlighting provided by <a href="https://torchlight.dev">Torchlight</a> </div> </div> </footer> </div> </body> </html>