How can I update and show proper value in multiple input

#1

Problem:

I have a full-page livewire component and I’m doing crud with a single modal, I’m creating variation for a product and variation has multiple values so in that case, I created a one to many relations between Variation and VariationValue. When I create there have no problem but when I want to update there have a problem, my multiple inputs have an index value not showing properly inside inputs, if I doing like $value->value then I see the proper value inside inputs, but I can’t update or delete them until if I have no id.

I want that user can update and delete and also add more fields as they wish, but my problem I can’t show the proper value inside inputs and can’t grab the id to delete from db , I’m trying to do with $editMode like wire:model.defer="{{ $editMode ? $values[$key]->value : 'values.'.$key }}" but it does not work, it just shows me the value inside wire:model.defer="value" when I inspect the element. How can I do this for update and delete also for new values, I searched a lot but no result found, below the image you can see that there have [object Object] inside those inputs not showing the proper values.

When $editMode = true it’s showing me like this

form
form543×625 11.8 KB

In my modal blade

<div class="col-12">
   <fieldset>
     <label>Variation values *</label>
     @foreach ($moreValues as $key => $value)
        <div class="{{ $loop->last ? '' : 'mb-2' }}" wire:key="{{ $key }}">

          <div class="input-group">
            <input type="text" 
                   wire:model.defer="values.{{ $key }}" 
                   class="form-control"                                       
                   placeholder="Variation value">

            <div class="input-group-append">
             @if ($loop->index === 0)
               <button wire:click.prevent="addRowForValue" 
                       class="btn btn-primary font-size-large" type="button">
                    +
               </button>
             @else
               <button wire:click.prevent="removeRowForValue({{ $key }})"
                       class="btn btn-danger font-size-large" type="button">
                    -
               </button>
             @endif
           </div>
         </div>

        @error("values.{{ $key }}")
           <span class="text-danger font-size-base">{{ $message }}</span>
        @enderror
      </div>
    @endforeach
  </fieldset>
</div>

In my Component

<?php

namespace App\Http\Livewire\Products\Variations;

use App\Models\Variation;
use Livewire\Component;

class Index extends Component
{

    public $moreValues = [0];

    public $editMode = false;

    public $name, $values = [];

    protected $rules = [
        'name' => 'required|string',
        'values.*' => 'required|string',
    ];

    public function addRowForValue()
    {
        $this->moreValues[] += 1;
    }

    public function removeRowForValue($key)
    {
        unset($this->moreValues[$key]);
    }

    public function store()
    {
        $this->validate();

        $variation = Variation::create([
            'name' => $this->name
        ]);

        foreach ($this->values as $key => $value) {
            $variation->values()->create([
                'value' => $this->values[$key]
            ]);
        }

        session()->flash('message', 'Unit create successfully.');

        $this->clearForm();
    }

    /**
     * @param $id
     */
    public function edit($id)
    {
        $this->editMode = true;

        $this->moreValues = [0];

        $this->resetErrorBag();

        $this->clearForm();

        // fill the form here with data
        $variation = Variation::query()->findOrFail($id);

        $this->name = $variation->name;

        $this->values = [];

        foreach ($variation->values as $key => $value) {

            // incrementing input by value
            $this->moreValues[$key] = $value;

            // showing value their own field
            $this->values[$key] = $value;
        }

        $this->emit('openModal');
    }

    protected function clearForm()
    {
        $this->name = '';
        $this->values = '';
    }

    public function render()
    {
        $variations = Variation::with('values')->latest('id')->get();

        return view('livewire.products.variations.index', compact('variations'))
            ->extends('layouts.app');
    }
}

Are you using the latest version of Livewire: yes

Do you have any screenshots or code examples: above