Laravel Livewire 和 Bootstrap 表单的重新加载问题
Reload issue with Laravel Livewire and Bootstrap form
我在使用任何 Javascript 表单时都遇到了 Livewire 问题。使用以下形式:https://bbbootstrap.com/snippets/multi-step-form-wizard-30467045(虽然我尝试了其他形式并且它发生在我身上都是因为电线:来自 livewire 的模型事件)
问题是 WIRE: MODEL 将我带到第一部分,我不能使用 WIRE: IGNORE 因为它会覆盖 SELECT 相关行为。
在第二部分我使用了以下相关表格:
<div class="form-group">
<label for="provincia">Provincia</label>
<select wire:model="ubicacionSeleccionada" class="form-control" id="ubicacion">
<option value=''>Seleccionar provincia</option>
@foreach($ubicaciones as $ubicacion)
<option value="{{$ubicacion->id}}">{{ $ubicacion->ubicacion }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="tipopropiedad">Localidad</label>
<select wire:model="area" class="form-control" id="localidad
{{ count($this->areas)== 0 ? 'hidden' : '' }} ">
<option value=''>Seleccionar localidad</option>
@foreach($this->areas as $area)
<option value={{ $area->id }}>{{ $area->name }}</option>
@endforeach
</select>
</div>
这不允许我使用 WIRE: IGNORE 中止事件。
问题是任何 WIRE:MODEL 都会生成一个事件,该事件采用第一部分的形式。好像是REFRESH
有谁知道如何使用 livewire 而不造成这种不便?
版本
按钮下一视图
<input type="button" name="next" class="next action-button" value="Continue" />
JAVASCRIPT
<script>
$(document).ready(function() {
var current_fs, next_fs, previous_fs; //fieldsets
var opacity;
$(".next ").click(function() {
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//Add Class Active
$(".progressbar li ").eq($("fieldset ").index(next_fs)).addClass("active ");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
next_fs.css({
'opacity': opacity
});
},
duration: 600
});
});
$(".previous ").click(function() {
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//Remove class active
$(".progressbar li ").eq($("fieldset ").index(current_fs)).removeClass("active ");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
previous_fs.css({
'opacity': opacity
});
},
duration: 600
});
});
$('.radio-group .radio').click(function() {
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
});
$(".submit ").click(function() {
return false;
})
});
你可以使用wire:model.lazy
<div class="form-group">
<label for="provincia">Provincia</label>
<select wire:model.lazy="ubicacionSeleccionada" class="form-control" id="ubicacion">
<option value=''>Seleccionar provincia</option>
@foreach($ubicaciones as $ubicacion)
<option value="{{$ubicacion->id}}">{{ $ubicacion->ubicacion }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="tipopropiedad">Localidad</label>
<select wire:model.lazy="area" class="form-control" id="localidad
{{ count($this->areas)== 0 ? 'hidden' : '' }} ">
<option value=''>Seleccionar localidad</option>
@foreach($this->areas as $area)
<option value={{ $area->id }}>{{ $area->name }}</option>
@endforeach
</select>
</div>
当您更改表单中的数据时,Livewire 正在重新加载组件。您的 Livewire 组件包含整个表单,因此您 javascript 所做的任何更改都将由于状态丢失而被遗忘。
不使用提供的 JavaScript 进行页面更改,而是使用像 selectedSection 这样的 Livewire 属性 并使用它来确定表单的部分以显示。这将允许您在 Livewire 更新时维护表单的状态。单击页面按钮时,还使用 Livewire 方法更新 selectedSection 的值。
我在使用任何 Javascript 表单时都遇到了 Livewire 问题。使用以下形式:https://bbbootstrap.com/snippets/multi-step-form-wizard-30467045(虽然我尝试了其他形式并且它发生在我身上都是因为电线:来自 livewire 的模型事件)
问题是 WIRE: MODEL 将我带到第一部分,我不能使用 WIRE: IGNORE 因为它会覆盖 SELECT 相关行为。
在第二部分我使用了以下相关表格:
<div class="form-group">
<label for="provincia">Provincia</label>
<select wire:model="ubicacionSeleccionada" class="form-control" id="ubicacion">
<option value=''>Seleccionar provincia</option>
@foreach($ubicaciones as $ubicacion)
<option value="{{$ubicacion->id}}">{{ $ubicacion->ubicacion }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="tipopropiedad">Localidad</label>
<select wire:model="area" class="form-control" id="localidad
{{ count($this->areas)== 0 ? 'hidden' : '' }} ">
<option value=''>Seleccionar localidad</option>
@foreach($this->areas as $area)
<option value={{ $area->id }}>{{ $area->name }}</option>
@endforeach
</select>
</div>
这不允许我使用 WIRE: IGNORE 中止事件。
问题是任何 WIRE:MODEL 都会生成一个事件,该事件采用第一部分的形式。好像是REFRESH
有谁知道如何使用 livewire 而不造成这种不便?
版本
按钮下一视图
<input type="button" name="next" class="next action-button" value="Continue" />
JAVASCRIPT
<script>
$(document).ready(function() {
var current_fs, next_fs, previous_fs; //fieldsets
var opacity;
$(".next ").click(function() {
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//Add Class Active
$(".progressbar li ").eq($("fieldset ").index(next_fs)).addClass("active ");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
next_fs.css({
'opacity': opacity
});
},
duration: 600
});
});
$(".previous ").click(function() {
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//Remove class active
$(".progressbar li ").eq($("fieldset ").index(current_fs)).removeClass("active ");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
previous_fs.css({
'opacity': opacity
});
},
duration: 600
});
});
$('.radio-group .radio').click(function() {
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
});
$(".submit ").click(function() {
return false;
})
});
你可以使用wire:model.lazy
<div class="form-group">
<label for="provincia">Provincia</label>
<select wire:model.lazy="ubicacionSeleccionada" class="form-control" id="ubicacion">
<option value=''>Seleccionar provincia</option>
@foreach($ubicaciones as $ubicacion)
<option value="{{$ubicacion->id}}">{{ $ubicacion->ubicacion }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="tipopropiedad">Localidad</label>
<select wire:model.lazy="area" class="form-control" id="localidad
{{ count($this->areas)== 0 ? 'hidden' : '' }} ">
<option value=''>Seleccionar localidad</option>
@foreach($this->areas as $area)
<option value={{ $area->id }}>{{ $area->name }}</option>
@endforeach
</select>
</div>
当您更改表单中的数据时,Livewire 正在重新加载组件。您的 Livewire 组件包含整个表单,因此您 javascript 所做的任何更改都将由于状态丢失而被遗忘。
不使用提供的 JavaScript 进行页面更改,而是使用像 selectedSection 这样的 Livewire 属性 并使用它来确定表单的部分以显示。这将允许您在 Livewire 更新时维护表单的状态。单击页面按钮时,还使用 Livewire 方法更新 selectedSection 的值。