php Question posted in
Official manual can be found here.

Php – html fields in livewire is not updating the data

public function removeCoreFunction($index){
    unset($this->coreFunctions[$index]);
    $this->coreFunctions = array_values($this->coreFunctions);
}

so i have this function here which removes the specific index from the coreFunctions and makes it an array value again. It works as i expected in the function, however in my blade file, it does not update the real data for that index.

<textarea type="text" rows="10" id="coreFunctions_{{$index}}_accomp" 
            name="coreFunctions[{{$index}}][accomp]" 
            wire:model.blur="coreFunctions.{{$index}}.accomp"   
            class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">

I alr tried the .live and etc.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I added this to my public function removeCoreFunction:

    $this->dispatch('update-supportive-functions', [json_encode($this->supportiveFunctions, true)]);

    and i added this to my blade file

    <script>
    document.addEventListener('livewire:init', () => {
        Livewire.on('update-core-functions', (data) => {
    // Parse the JSON data into a JavaScript array
    const dataArray = JSON.parse(data);
                        
    // Iterate over the array elements
    dataArray.forEach((element, index) => {
          document.getElementById('coreFunctions_' + index + '_output').value = element.output;
          document.getElementById('coreFunctions_' + index + '_indicator').value = element.indicator;
          document.getElementById('coreFunctions_' + index + '_accomp').value = element.accomp;
          document.getElementById('coreFunctions_' + index + '_Q').value = element.Q;
          document.getElementById('coreFunctions_' + index + '_E').value = element.E;
          document.getElementById('coreFunctions_' + index + '_T').value = element.T;
          document.getElementById('coreFunctions_' + index + '_A').value = element.A;
          document.getElementById('coreFunctions_' + index + '_weight').value = element.weight;
          document.getElementById('coreFunctions_' + index + '_remarks').value = element.remarks;
              });
          });
      });
</script>

  2. 0

    The context is not entirely clear, since we can’t see the relevant parts of the class and the view, so I will try to deduce some elements.
    If the assumed scenario does not reflect your situation, please post the relevant parts of the class and view.

    Since there is an $Index I assume that there is a loop that displays some elements of an array.
    I assume also there is a delete button (or equivalent) that calls removeCoreFunction() to delete a row from the array.

    The "rows" displayed by the loop must be contained in a tag with an unique wire:key (unique in an absolute sense, in the DOM and also in the dataset) to let understand Livewire which row to update in the DOM.

    The array index, since is compacted by array_values() is not a good candidate (the indexes are reassigned)

    You have a couple of options for wire:key:

    • you can use an id column if available
    • you can continue to use $index but you can’t compact it (at most you can reorder the rows if necessary)

    This is a hypothetical part of the view using $index as wire:key :

    <div>

    @foreach ($coreFunctions as $index => $c)

        <div wire:key="coreFunc-{{ $index }}"> // index as key

            <textarea rows="10"
                      wire:model.blur="coreFunctions.{{$index}}.accomp"
                      class="block ...."
            >{{ $c->accomp }}</textarea>

            <button wire:click="removeCoreFunction({{ $index }})">
                [Delete]
            </button>

        </div>

    @endforeach
</div>

    The related removeCoreFunction() becomes:

    public function removeCoreFunction($index){
    unset($this->coreFunctions[$index]);
}

    If instead you have a unique id column available:

    <div>

    @foreach ($coreFunctions as $index => $c)

        <div wire:key="coreFunc-{{ $c->id }}"> // id column as key

            <textarea rows="10"
                      wire:model.blur="coreFunctions.{{$index}}.accomp"
                      class="block ...."
            >{{ $c->accomp }}</textarea>

            <button wire:click="removeCoreFunction({{ $index }})">
                [Delete]
            </button>

        </div>

    @endforeach

</div>

    The related removeCoreFunction() can be the same as above which uses unset() or, if you want to keep indexes contiguous, it can be simplified like this:

    public function removeCoreFunction($index)
{
    array_splice ($this->coreFunctions, $index, 1);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search