Binding - computed property

#1

Hi to everyone!
I’m new in livewire and I’m writing my first website… as a hobby :grinning:

My question: is it possible to bind a computed property in a foreach cycle? I think yes but I don’t know how :woozy_face:

I have a computed property in my LW component:

public function getReciptProperty()
{
    return Recipt::where('user_id',$this->user_id)->paginate(5);
}

In my blade file I have:

@foreach($this->recipt as $rec)

    <!-- COMMENTO -->
   <textarea wire:model.lazy=" WHAT I HAVE TO WRITE HERE??? " 
   class="py-1 px-2 my-1 rounded shadow-2xl border"></textarea>

@endforeach

what I want to do: I’m trying to load the comment from db in the textarea and then, when the user modifies the comment, the “updated” method is called. In this method I will update the db. ‘comment’ is the column in the table of db.

I’ve found this solution to workaround but I’m sure this is not the best way.

In the blade file:
Clipboard01

and then in LW component
Clipboard02

May be it is a stupid question and the solution is simple… if someone wants to give me a reference in the help or a link, it would be highly appreciated! :slightly_smiling_face:

Laravel 7
Livewire 2.2.3

Thank you!
Marco

#2

First, you can do some enhancement to your code by calling a relationship to get the Receipt model

in your user model:

  public function recipts() 
  {
     return $this->hasMany(Recipt::class);
  }

and in you livewire component you can do:

  $user = User::findOrFail($this->user_id);
  $user->recipts()->paginate(5);

So, I’m not sure but from your question, you want to update a single comment from paginated comments without refreshing.

Alright, if I got the question right, you are trying to do a chat app

here is your solution :grinning:

P.S: i think you want to do something like this
image

happy coding

#3

Thank you very much for the answer.

So, I’m not sure but from your question, you want to update a single comment from paginated comments without refreshing.

It’s exactly what I’m tring to do!
The link you suggest follows a different way. There is a component called for each iteration.

It looks like it is not possible to bind (using wire:model) a computed property with its index… is it right?

#4

Maybe you can try something like this:

@foreach($comments as $comment)
  <div>
      <textarea wire:id="$comment->id">{{$comment->body}}</textarea>
     <button wire:click="edit($commet->id)">Edit</button>
  </div>

@endforeach

in your component

public function editComment($id)
{
 // find the comment by id and edit it  then return the comments again
 $user->receipt->where('id', $id)->update($comment->body);
return $user->receipt->paginate(5);
}

you can make a popup for example when trying to edit the specific message and emit an event holding the changes into a specific method in your component

You can read more about that here

#5

Did you get the solution @marco?

#6

hi @skywalker and, first of all, thank you for your answers!

I’m new in livewire and so I have a lot of doubts.

I’ve found a solution following your first link solution.

But doubts remain…

for example, which is the difference between

   // Computed Property
    public function getPostProperty()
    {
        return Post::find($this->postId);
    }

where $this->post let me access to the collection of posts

and

// without computed property
public $posts

public mount(){
$this->post=Post::find($this->postId);
}

in the same way with $this->post I can access to the collection of posts.

In my first approach I followed the first way (computed property) but, in my solution, I follow the second way.

I summarize the problem: is it possible to bind with “wire:model=” a computed property in a foreach cycle?

This is “my” solution:
I have two livewire component: “Ricette” and “Ricetta”.

Ricette.php:

class Ricette extends Component

{
    use WithPagination;
    public $recipts;
    // mount
    public function mount(){
       $this->recipts=Recipt::where('user_id',$this->user_id)->get();
}

Ricette.blade.hp

1
1845×295 12.9 KB

now, in ricetta.php I have

public function save(){
        $ricetta = Recipt::findOrFail($this->ricettaId);
        $ricetta->comment=$this->comment;
        $ricetta->save();
    }

and ricetta.blade.php

2
21103×508 35.7 KB

In this way I have a bind between the comment of a single recipt with the LW property. I can access to the updated comment with $this->comment in the save method.This text will be hidden

1 Like
#7

That’s Great @marco, I’m Glad to solve your problem!
if you need anything DM me or mention me in your thread question and I’ll be happy to help you

1 Like