为什么从数据库中检索数据后动态添加部分不起作用？

Question

我有一个按钮，可以在表单中添加一个新的语言部分，以便用户向他们的个人资料中添加一种新语言，并且它工作正常，直到我添加了从数据库中获取现有用户语言的部分以显示以防他们想要更改语言或更新它。我已经挣扎了几个小时，无法弄清楚为什么会发生这种情况，为什么在调用getUserLanguages 函数时它会停止工作。当从render 方法中删除getUserLanguages 函数时，它将再次开始工作。

组件控制器：

public function addLanguage($i)
{
    $i = $this->i;
    if ($i <= 3)
    {
        $i = $i + 1;
        $this->i = $i;
        array_push($this->languages , ['language_name'=>'', 'language_level'=>'']);
    }
    else
    {
        $this->sweetAlert('error', 'You only can add 3 langauges.');
    }
}


public function getUserLanguages()
{
    if (empty(!UserLanguage::where('user_id', auth()->user())))
    {
        $this->languages = UserLanguage::where('user_id', auth()->user()->id)->get(['language_name', 'language_level'])->toArray();
        $this->i = count($this->languages);
    }
}

观点：

@foreach ($languages as $index)
    <div class="card card-body mb-4">
        <div class="row">
            <div class="form-group col-md-6">
                <label class="" for="languageName">Language</label>
                <select class="form-control form-control-alternative" name="language-name" {{-- id="languageName" --}} wire:model="languages.{{ $loop->index }}.language_name">
                    <option value="" class="form-control" selected disabled>Select Language</option>
                    @foreach ($language_names as $name)
                        <option value="{{ $name->abbreviation }}" class="form-control">{{ $name->language }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group col-md-6">
                <label class="" for="languageProficiency">Proficiency</label>
                <select class="form-control form-control-alternative" name="language-proficiency" {{-- id="languageProficiency" --}} wire:model="languages.{{ $loop->index }}.language_level">
                    <option value="" class="form-control" selected disabled>Proficinecy Level</option>
                    @foreach ($language_levels as $level)
                        <option value="{{ $level->level }}" class="form-control">{{ $level->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
    @error('languages.*.level')
        <small class="text-warning">{{ $message }}</small>
    @enderror
    @error('languages.*.language')
        <small class="text-warning">{{ $message }}</small>
    @enderror
@endforeach

@if (count($languages) < 3)
    <div class="row">
        <div class="col-md-12">
            <button type="button" class="btn btn-outline-secondary btn-round btn-block" wire:click="addLanguage({{$i}})"><span class="btn-inner--icon"><i class="fa fa-plus fa-2x"></i></span></button>
        </div>
    </div>
@endif

Answer 1

所以最后在我从mount 方法而不是render 方法调用getUserLanguages() 之后，一切正常。