1

I'm currently struggling with setting up a table made up of editable rows that represent records in my database. Each row has a number of input fields that I want to wire:model so they enter a value, and then the database is updated and the change is reflected on the page.

I'm using something like <input wire:model="taskArray.{{ $task->id }}.variableName"/> for each row, which seems to work, kind of.

The component will receive the array and the data is there if I dd() the $taskArray. However, once the initial change is made to the variable value, it's not showing on the front end, because it's reading the $taskArray, which is empty until something changes.

So I've tried just setting the value attribute of the input, but that doesn't work because wire:model (in my experience) doesn't allow you to set a value, it wants to set it based on the variable value, which is an empty array I'm using to just push the data to the database. If I could set a value based on the actual eloquent model, that would solve my problem, but it doesn't seem possible.

So my next thought was to build an array when the page loads of all the values, but then I have to continually rebuild that array everytime a value changes and it just feels extremely hacky. There's gotta be a better way that I'm missing.

Should I be looking to use alpine and @entangle, or what? This is the biggest thing I've struggled with in Livewire is just getting things to work when there's multiple inputs dynamically generated.

I've also tried converting each row to a nested livewire component and that turned out to be a total cluster. I'm really stuck on this and it feels like it should just work with the value attribute or something.

What am I doing wrong?

I should mention I'm using the bootstrap datepicker library for the input, as it's a date picker. Perhaps that could be playing into it, but I'm not sure.

Happy to share more code, just not sure where to start and there's a good bit of code I could share.

hyphen
  • 2,368
  • 5
  • 28
  • 59
  • Is there a reason why you haven't decided to use an [Eloquent Collection](https://laravel-livewire.com/docs/2.x/properties#binding-models)? It would probably save you a lot of hassle on the binding part. – Yinci Mar 31 '23 at 05:25
  • @Yinci I don't know a way to do that. I'm dealing with not one model but an array of models, so I'm not sure how to wire:model to each specific model in the collection without using an array. How would I reference each specific model on the front end? I tried creating a row component that renders in a loop so I could wire:model to one model and not an array, and that sort of worked, but ended up causing other problems with my front end code. I could potentially go back to that approach if that's the best way to do it. – hyphen Mar 31 '23 at 12:08
  • Well, is it one model or more than one? Since if it's just one, you can simply do `Model::where('x', $x)->get()` and you'll have an Eloquent collection. Individual row components _can_ work but are not advised if you don't need it on a singular level. Last option would be to manually fill the array with the needed data. You mentioned rebuilding it each time, and that would only be the case if you paginated, but building an array isn't particularly slow or anything, nor hacky, so it wouldn't be bad practice. – Yinci Apr 03 '23 at 05:13
  • @Yinci It's a collection of models, so that's i think what is making it more complicated. I ended up just going with my building the array solution. It would be cool if Livewire could be smart enough to map to a model within a collection.. – hyphen Apr 06 '23 at 19:09

0 Answers0