Binded array variable values are not shown on the blade component

#1

Hello Gurus !
I started to do some livewire stuff, and promptly got stuck at this point :frowning:

I created a livewire component in which there is a public array variable
public $transTexts = [];

This variable is filled up with data at render function before calling the view!

    foreach ($this->items as $item) {
        foreach ($item["erp_helper_text"]['erp_helper_text_transalations'] as $trans) {
            $this->transTexts[$trans['id']] = $trans['text'];
        }
    }

Data in array now:
array:6 [▼
676 => “Férfi”
677 => “Male”
678 => “Mann”
679 => “Nő”
680 => “Female”
681 => “Frau”
]

The data in array is
the key is the transalation id in db, value is the transalation text in db.

The view is called and rendered. I binded these values to input component on blade as follows

image
image1013×269 19.7 KB

At the source code for the blade I can see the

input
wire:model.lazy=“transTexts.676”
type=“text”
class=“form-control pr-2”
value=""

So the key is ok for the binding but the value is not shown in the input !
Moreover when checking in the blade for the array values with dd, here it is what I got

array:6 [▼
0 => “Férfi”
1 => “Male”
2 => “Mann”
3 => “Nő”
4 => “Female”
5 => “Frau”
]

So after the rendering of the page the keys are not ok. It seems that the keys have been changed. And the input fields are empty on the blade output,but they should show the values! Am I right ?
When I fill one of the input field I will get back the following array at the backend after the sync !
array:7 [▼
0 => “Férfi”
1 => “Male”
2 => “Mann”
3 => “Nő”
4 => “Female”
5 => “Frau”
676 => “sss”
]
So the input gives the right key now!

I hope it was clear what is my problem. Anyone has got any idea what should be the problem ?

Thanks a lot

Zoltan

#2

Livewire usually does keep array keys.
Maybe this array is getting modified somewhere in your code?

#3

Thanks for the answer.
I attached the liveware component code , just in case somebody can detect a bug :slight_smile:

   <?php

namespace App\Http\Livewire;

use App\Models\Sexes;
use Livewire\Component;

class LSexes extends Component
{
public $items= [];
public $sortBy = ‘transalated’;
public $sortDirection = true;
public $perPage = 10;
public $search = [];
public $transTexts = [];

public $dbtablesettings = [
    'model' => Sexes::class,
    'cardSize' => 8,
    'isAction' => true,
    'searchable' => true,
    'isTransalations' => true,
    'columns' => [
        'TRANS' => [
            'caption' => 'Sex',
            'width' => 'col-md-10',
            'type' => 'string',
            'searchable' => true,
            'searchName' => 'transalated',
            'placeholder' => 'Filter Sexes ...',
            'sorting' => true
        ],
        'ACTIONS' => [
            'caption' => 'Action',
            'width' => 'col-md-2',
            'type' => 'string',
            'searchable' => false,
            'searchName' => '',
            'placeholder' => '',
            'sorting' => false
        ]
    ],
];



public function mount()
{
    $this->createStuff();
}

function sortArrayByKey(&$array, $key, $string = false, $asc = true)
{
    if ($string) {
        usort($array, function ($a, $b) use (&$key, &$asc) {
            if ($asc) return strcmp(strtolower($a{$key}), strtolower($b{$key}));
            else        return strcmp(strtolower($b{$key}), strtolower($a{$key}));
        });
    } else {
        usort($array, function ($a, $b) use (&$key, &$asc) {
            if ($a[$key] == $b{$key}) {
                return 0;
            }
            if ($asc) return ($a{$key} < $b{$key}) ? -1 : 1;
            else     return ($a{$key} > $b{$key}) ? -1 : 1;

        });
    }
}

/**
 * @return \Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
 */
public function render()
{

    $this->createStuff();
    return view('livewire.l-sexes');
}

protected function createStuff()
{
    $tmpArray=[];
    $this->items = Sexes::all()->toArray();


    $this->sortArrayByKey($this->items, "transalated", true, $this->sortDirection);

    if (count($this->search) > 0) {

        foreach ($this->search as $key => $value) {
            if (!empty($value)) {
                foreach ($this->items as $line) {
                    if (strpos($line[$key], $value) > -1) {
                        array_push($tmpArray, $line);
                    }
                }
                $this->items = $tmpArray;
            }
        }

    }

    foreach ($this->items as $item) {
        foreach ($item["erp_helper_text"]['erp_helper_text_transalations'] as $trans) {
            $this->transTexts[$trans['id']] = $trans['text'];
        }
    }

}


public function sortBy($field)
{
    if ($this->sortDirection == true) {
        $this->sortDirection = false;
    } else {
        $this->sortDirection = true;
    }


    return $this->sortBy = $field;
}

}

#4

the problem doesn’t seem to be here, maybe it’s in rendering the view

I recommend you isolate the problem
Split into smaller parts

Create a small sample matrix and render in the view
Then you think about ordering and getting the data from the database

I just answered a matrix rendering question in the view, see if it helps you

#5

Thanks for your answer !
The solution was that I changed the array from numeric keys to alphanumeric keys. Like follows

$this->transTexts[‘transid_’.$trans[‘id’]] = $trans[‘text’];

And in the blade:
input wire:model.lazy=“transTexts.{{‘transid_’.$trans[‘id’]}}” type=“text” class=“form-control pr-2” id=“transTexts.{{‘transid_’.$trans[‘id’]}}” name=“transTexts.{{‘transid_’.$trans[‘id’]}}”

In this way it does work. I think something in my application in the blade pages rearranges the arrays with numeric keys !

1 Like