Livewire: problem whit display data and form

Question

I have problem with display data and form on one page. Display data from database disappear after write in textarea any word. The same problem ist when i click on submit. In debugger is only data from first query, from second is cleared. I try with one query (second), but it's the same.

My example code

route web:

 Route::middleware(['auth:sanctum', 'verified'])->get('/tickets/show/{slug}', Tickets\Show::class)->name('tickets.show');

Livewire:

public $ticket;
public $slug;
public $posts;
public $content_post;
public  $ticket_id;

public function mount($slug){
    $this->ticket = Tickets::where('tickets.id','=', $slug)->join('users', 'users.id', '=', 'tickets.user_id')
        ->select('users.email','users.phone','users.username','users.first_name','users.last_name','tickets.user_id','tickets.created_at',
            'tickets.id', 'tickets.subject','tickets.status_id','tickets.admin_id')->first();
    $this->posts = TicketsPost::where('tickets_posts.ticket_id','=', $slug)->join('users', 'users.id', '=', 'tickets_posts.user_id')
        ->select('users.email','users.username','users.first_name','users.last_name','tickets_posts.user_id','tickets_posts.created_at',
            'tickets_posts.ticket_id','tickets_posts.post')->get();
}
public function addPost()
{

    $this->validate([
        'content_post' => 'required'
    ]);
    $user_id = Auth::user()->getAuthIdentifier();

  
        TicketsPost::create([
            'ticket_id' => $this->ticket_id,
            'user_id' => $user_id,
            'post' => $this->content_post,
        ]);
   


}
public function render()
{

    return view('livewire.tickets.show');
}

View:

  <p >#{{$ticket->id}}</p>
                      <p >{{$ticket->subject}}</p>

                  @foreach($posts as $post)

                                  <p >{{$post->first_name}}  {{$post->last_name}}</p>
                                  <p >{{ date('d.m.Y H:i',strtotime($post->created_at)) }}</p>
                              <p > {{$post->post}}</p>
                  @endforeach


                      <form  >
                          <input type="hidden" name="ticket_id" value="2"  wire:model="ticket_id">
                          <textarea  name="content_post"
                                    class=""
                                    rows="5" required="" placeholder="Treść wiadomości" wire:model="content_post"></textarea>
                                  @error('content_post') <span class="text-red-500">{{ $message }}</span>@enderror
                                  <button wire:click.prevent="addPost()" type="submit" class="">
                                      <span id="btn_text" class="ml-2">Dodaj</span>
                                  </button>
                      </form>

score 0 · Answer 1 · answered Aug 27 '21 at 17:34

In Livewire, make sure your component has a single-level root element only. And, don't forget to add wire:key in your element inside every loop in a blade.

Your loop should be as;

@foreach($posts as $key => $post)
<div wire:key="{{'post'.$key}}">
<p>{{$post->first_name}} {{$post->last_name}}</p>
 <p >{{ date('d.m.Y H:i',strtotime($post->created_at)) }}</p>
<p > {{$post->post}}</p>
</div>
@endforeach

Livewire: problem whit display data and form

1 Answers1