Rerender variables outside render() on component refresh

What seems to be the problem:

Good day everyone,
I got a page with multiple modals (bootstrap). Each modal got its own data that should be rendered only when modal is opened. As each modal has a lot of data, I cannot load it all in render. Each modal data loads with it`s function seperatly. My problem is, when wire:model rerender component, or validation returns errors if drefer is used for model, data is not rerendered, and basicly you got error, variable undefined.

Are you using the latest version of Livewire:
Yes.

class StudentList extends Component
{
use WithPagination;

public $groups;
public $courses;
public $statuses;
public $students_list;
public $pilsonibas, $tautibas, $filiales, $specialitates, $nodalas, $izglitibas, $macibu_iestades, $countries, $pilsetas, $nozares, $comstats, $discountdescriptions, $registerdocs;

public Student $student;

public $searchPersonalCode;
public $searchSurname;
public $searchGroup;
public $searchCourse;

public $openedModal = false;

protected $paginationTheme = 'bootstrap';


protected $rules = [
    'student.name' => 'required',
    'student.surname' => 'required',
	'student.course' => 'required',
	'student.group' => 'required',
];

public function openModal()
{
    $this->openedModal = true;
    $this->emit('openModal');
}

public function closeModal()
{
    $this->emit('closeModal');
    $this->openedModal = false;

}

public function resetSearch()
{
    $this->reset('searchPersonalCode', 'searchSurname','searchGroup','searchCourse');
}

public function mount()
{

    $this->groups = Group::all();
    $this->courses = Course::all();
    $this->students_list = Student::select('id','name','surname','person_id')->get();

}

public function render()
{
    if($this->searchPersonalCode || $this->searchSurname || $this->searchGroup || $this->searchCourse) {
        $this->resetPage();
    }

    $students = Student::with('group','specialitate','nodala','filiale')
        ->withTrashed()
        ->sortable()
        ->when(!empty($this->searchPersonalCode), function($query){
            $query->where('id', $this->searchPersonalCode);
        })
        ->when(!empty($this->searchSurname), function($query){
            $query->where('id', $this->searchSurname);
        })
        ->when(!empty($this->searchGroup), function($query){
            $query->whereHas('group',function($query){
               $query->where('id',$this->searchGroup);
            });
        })
        ->when(!empty($this->searchCourse), function($query){
            $query->whereHas('group',function($query){
                $query->whereHas('course',function($query){
                    $query->where('id',$this->searchCourse);
                });
            });
        })
        ->paginate(10);

    return view('livewire.admin.studenti.studentu-saraksti', ['students' => $students]);
}

public function editStudent($id = null)
{

    $this->pilsonibas = Pilsoniba::select('name','id')->OrderBy('name')->get();
    $this->tautibas = Tautiba::select('id','name')->OrderBy('name')->get();
    $this->filiales = Filiale::select('id','name')->OrderBy('name')->get();
    $this->specialitates = Specialitate::OrderBy('name')->get();
    $this->nodalas = Nodala::select('id','name')->OrderBy('name')->get();
    $this->izglitibas = Izglitiba::select('id','name')->OrderBy('name')->get();
    $this->macibu_iestades = MacibuIestade::select('id','name')->OrderBy('name')->get();
    $this->countries = Country::select('id','name')->OrderBy('name')->get();
    $this->pilsetas = Pilseta::select('id','name')->OrderBy('name')->get();
    $this->nozares = Nozare::select('id','name')->OrderBy('name')->get();
    $this->comstats = Comstat::select('id','name')->OrderBy('name')->get();
    $this->discountdescriptions = DiscountDescription::select('id','name')->OrderBy('name')->get();
    $this->registerdocs = RegisterDocsController::select('id','name')->OrderBy('id')->get();

    $id == null ? $this->edit_student = new Student() : $this->edit_student = Student::find($id);
    $this->openModal();
}

public function saveStudent()
{

    $this->validate();
    $this->edit_student->save();
    $this->closeModal();

}

}

List of students with edit button, when edit button is clicked, it runs editStudent(), it loads a lot of data for form dropdowns and opens modal window. on form.submit.prevent=‘saveStudent’ If the data is defered, and validation returns true, everything works fine. But if validation fails, or wire:models rerender input fields, data from editStudent() is not rendered. How to rerender this data? this data cannot be in component render, beacuse there will be othe modals with different data, and it will slow down component render.

I’m looking in your code for the edit_student property…where is declared as public to be called in the edit_student method as $this->edit_student?

Sorry it`s my typo here , I have public Student $edit_student; in my code

is also a type mistake, in code it is a model, not controller…

Share you blade code to please if you can

It may be stupid, but I just got it working.
I was using
$this->pilsonibas = DB::table(‘pilsonibas’)->whereNull(‘deleted_at’)->select(‘name’,‘id’)->OrderBy(‘name’)->get();

and it is NOT rerendered,
but when I changed it to
$this->pilsonibas = Pilsoniba::select(‘name’,‘id’)->OrderBy(‘name’)->get();

It is rerendered…

So I must use model, not db query

Uhhh, that’s good you find the issue. Good codding there!

2 Likes