我被困在Laravel Livewire中，我使用多重选择，这是一个向导形式

Question

我在laravel livwire中有一个向导，有4个步骤。在第一步中，我有一个选择框，用于多重选择，一切都很好，但是当我转到第二步并返回时，问题来了选择2扭曲和松散它的样式选择框不包含它的选定值

我是第一次使用live wire，所以对它不了解。

这是我的叶片组件我不太清楚wire:ignore的作用是什么，但是我从互联网上使用了它。

<div class="col-sm-12 col-md-6 col-xl-6 col-lg-6 mb-10">
<x-label for="vehicle_groups" class="required">Vehicle Groups</x-label>
<div wire:ignore>
<x-select-two class="form-select-solid"  id="vehicle_groups" multiple>
<option value=""></option>
@foreach($vehicleGroups as $vehicleGroup)
<option value="{{ $vehicleGroup->id }}">{{ $vehicleGroup->group_name }}</option>
@endforeach
</x-select-two>
</div>
@error('vehicle_groups')
<x-error>{{ $message }}</x-error>
@enderror
</div>

<script>
document.addEventListener("livewire:load", () => {
$('#vehicle_groups').select2().on('change', function (e) {
var data = $('#vehicle_groups').select2("val");
@this.set('vehicle_groups', data);
});
});
</script>

这是我的livewire组件

<?php
namespace AppHttpLivewire;
use AppModelsVgroup;
use LivewireComponent;
class Vehicle extends Component
{
public $currentPage = 1;
public $type, $vehicle_groups;

public function mount()
{
}
public function render()
{
$vehicleGroups = Vgroup::get(['id', 'group_name']);
return view('admin.livewire.vehicle', compact('vehicleGroups'));
}
public function gotToNextPage()
{
if ($this->currentPage === 1) {
$this->validate([
'type' => ['required'],
'vehicle_groups' => ['required']
]);
} elseif ($this->currentPage === 2) {
} else {
}
$this->currentPage++;
}
public function gotToPreviousPage()
{
$this->currentPage--;
}

public function submitForm()
{
$this->currentPage = 1;
}
}

Answer 1

wire:ignore您将使用它,如果你不想rerender代码的一部分,例如假设您有一个js代码,并在使用livewire它不能很好地工作,因为livewire使请求每次和js代码不能做它的工作,现在,你必须知道select2,创建它自己的DOM和livewire不断发出请求(所以你可以看到它不是一个好的组合),因此您需要添加线:忽略(忽略select2)。

所以的问题，样式不渲染再次，你可以尝试添加一个DOMContentLoaded事件中的select 2:

document.addEventListener("DOMContentLoaded", () => {
$('#vehicle_groups').select2();
})  

像这样的，样式将在页面加载时添加

另一方面，要获取数据，您可以尝试添加ready事件:

$(document).ready(function() {
$('#vehicle_groups').select2("val");
})  

或

$(document).ready(function() {
$('#vehicle_groups').select2();
$('#vehicle_groups').val();
})  

我看到你正在使用事件"livewire:load">在我的情况下，这个事件没有为我工作(在检查器中，它抛出一个事件不存在的错误)，你可以尝试使用钩子代替"livewire:load">

Livewire.hook('message.processed', (message, component) => {
})

此事件将在livewire的所有请求完成时调用

https://laravel-livewire.com/docs/2.x/lifecycle-hooks

这里是文档的链接，如果你想查看它

最后我想评论一些东西，我看到你正在使用$vehicleGroup(我猜这是一个数组)，你正在获取视图上的数据，所有的好吧，但是你在select 2上使用数组来覆盖数据，这是你想做的吗?设置("vehicle_groups"数据))

你可以使用属性wire:model(如果你不需要在那个select中每次都发出请求，最好使用wire:model.defer，就像这样，只有在它被提交时才会发出请求)，在livewire上调用一个变量并存储select

的值

<x-select-two class="form-select-solid" wire:model="vehicle_variable"  id="vehicle_groups" multiple>
<option value=""></option>
@foreach($vehicleGroups as $vehicleGroup)
<option value="{{ $vehicleGroup->id }}">
{{$vehicleGroup->group_name }}
</option>
@endforeach
</x-select-two>

线:模型="vehicle_variable"

now on livewire:

公共美元vehicle_variable

and on select:

@this。设置("vehicle_variable"数据)

现在你有了一个变量的值，而不是一个数组(如果它是一个数组)

检查数据是否存在，您可以使用laravel的调试器"ddd()"在mount函数内部(mount函数，将在加载页面时调用):

public function mount()
{
ddd($vehicle_variable);
}

如果它不是null，那么select2应该工作，然而，如果值为null，你需要检查你的livewire

如果你有任何问题，尽管问，我会尽力回答!