Блог

У меня есть таблица компонент, который имеет встроенное редактирование подтверждение всплывающее окно ,механизм его заключается в том, что при нажатии кнопки удалить это вызывает функцию в компоненте класса, который присваивает переменной confirmDelete для столбца ID, который покажет подтвердите удаление сообщения по столбцу (ИДК, если это актуально или нет)
теперь я ищу, чтобы оживить ее, показывая , любые идеи о том, как это сделать ? В поисках ответов я обнаружил, что некоторые люди используют альпийские JS, чтобы показать данные и не последний, но я хочу показать подтвердите сообщение на определенную строку, которая была нажата, чтобы удалить ,когда я пытаюсь сделать это с Alpine и JS нажав на кнопку «Удалить» делает сообщение показать все подряд
вот мой компонент, если кто-то хочет проверить это, чтобы дать ответы

 <div x-data={open:true}>
    

    <div class="container mx-auto px-4 sm:px-8 ">
        <div class="py-8">
            <div class="flex flex-row mb-1 sm:mb-0 justify-between w-full">
                <h2 class="text-2xl leading-tight">
                    Students
                </h2>
                <div class="text-end">
                    <form class="flex w-full max-w-sm space-x-3">
                        <div class=" relative ">
                            <input type="text"  class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="name"/>
                            </div>
                            <button class="flex-shrink-0 px-4 py-2 text-base font-semibold text-white bg-purple-600 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200" type="submit">
                                Filter
                            </button>
                        </form>
                    </div>
                </div>
                <div  class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
                    <div class="inline-block min-w-full shadow-lg rounded-lg overflow-hidden">
                        <table class="min-w-full leading-normal table-fixed">
                            <thead>
                                <tr >
                                    <th scope="col" class="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal">
                                        Student
                                    </th>
                                    <th scope="col" class="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal">
                                        Age
                                    </th>
                                    <th scope="col" class="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal">
                                        E-mail
                                    </th>
                                    <th  scope="col" class="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal">
                                        Phone number
                                    </th>
                                    <th x-show="!open" colspan="3"></th>
                                    <th  scope="col" class="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal">
                                        Grade
                                    </th>
                                    <th  scope="col" class="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal">
                                        CLass-group
                                    </th>
                                    <th  scope="col" class="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal">
                                        Action
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($students as $student )
                                
                                <tr>
                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0">
                                                <a href="#" class="block relative">
                                                    <img alt="profil" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtGSxRiDjbP9GqU0rusWrXNLAkWy4OLqhdugamp;usqp=CAU" class="mx-auto object-cover rounded-full h-10 w-10 "/>
                                                </a>
                                            </div>
                                            <div class="ml-3">
                                                <p class="text-gray-900 whitespace-no-wrap">
                                                    {{$student->name}}
                                                </p>
                                            </div>
                                        </div>
                                        
                                    </td>
                                    <td  class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        <p class="text-gray-900 whitespace-no-wrap">
                                            {{$student->age}}
                                        </p>
                                    </td>
                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        <p class="text-gray-900 whitespace-no-wrap">
                                            {{$student->email}}
                                        </p>
                                    </td>
                                    <td    class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        <p class="text-gray-900 whitespace-no-wrap  ">
                                            {{$student->phoneNumber}}

                                        </p>
                                        
                                    </td>
                                    @if ($cDelete==$student->id)
                                        
                                    
                                    <td colspan="3"  
                                      class="px-5 py-5 border-b border-gray-200 bg-red-500 text-sm">
                                        <p class="text-white whitespace-no-wrap  ">
                                            
                                        <b>Are you sure you wnt to delete this student ? <a href="#">Yes</a><a @click="open = true" href="#">No</a> </b>
                                        </p>
                                        
                                    </td>
                                    @else
                                    <td   class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        <p class="text-gray-900 whitespace-no-wrap  ">
                                            {{$student->classroom->grade}} {{$student->classroom->grade ==1 ?'st':(($student->classroom->grade == 2)? 'nd': 'th')}}

                                        </p>
                                    </td>
                                    <td   class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        <span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
                                            <span aria-hidden="true" class="absolute inset-0  opacity-50 rounded-full">
                                            </span>
                                            <span class="relative">
                                                {{$student->classroom->group}}
                                            </span>
                                        </span>
                                    </td>
                                    <td  class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
                                                <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
                                                <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
                                              </svg>
                                        </a>
                                        <a href="#" class="text-red-500 hover:text-red-700" wire:click="confirmDelete({{$student->id}})" >
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                                          </svg>
                                        </a>
                                    </td>
                                </tr>
                              @endif
                                @endforeach
                                
                            </tbody>
                        </table>
                        
                       
                       
    



</div>

 

 <?php

namespace AppHttpLivewire;

use AppModelsStudent;
use LivewireComponent;

class Students extends Component {

    public $cDelete;

    public function confirmDelete($id) {
        $this->cDelete = $id;
    }

    public function render() {
        return view('livewire.students', [
            'students' => Student::all(),
        ]);
    }
}