Laravel Livewire 和 Bootstrap 表单的重新加载问题

Question

当我使用任何 Javascript 表单时，我都遇到了 Livewire 问题。使用以下形式：https://bbbootstrap.com/snippets/multi-step-form-wizard-30467045（虽然我尝试了其他形式，但它发生在我身上都是由于wire：来自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 都会生成一个采用第一部分形式的事件。好像刷新了

有谁知道我如何使用 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;
    })

});

Answer 1

当您更改表单中的数据时，Livewire 会重新加载组件。您的 Livewire 组件包含整个表单，因此您的 javascript 所做的任何更改都将由于状态丢失而被忘记。

不要使用提供的 JavaScript 进行页面更改，而是使用 Livewire 属性（如 selectedSection）并使用它来确定要显示的表单部分。这将允许您在 Livewire 更新时保持表单的状态。单击页面按钮时，还可以使用 Livewire 方法更新 selectedSection 的值。

Answer 2

你可以使用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>

Answer 3

在wire:navigate 后重新初始化 jQuery 和 Bootstrap，与 Livewire 汽车中的菜单功能一起使用，以便在 URL 内容wire:navigate 上使用。