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

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() 之后一切正常。

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

why Dynamically add section doesn't work after retrieving the data from DB?

php

laravel

laravel-livewire