Javascript Laravel Livewire和引导表单的重新加载问题

当我使用任何Javascript表单时，我看到了一个Livewire问题。使用以下表单：（尽管我尝试了其他表单，但它发生在我身上都是由于wire：livewire中的模型事件）

问题是WIRE:MODEL将我带到第一个部分，我不能使用WIRE:IGNORE，因为它会覆盖与选择相关的行为

在第二节中，我使用以下相关表格：

<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>

省
自选省
@foreach（$ubicacions作为$ubicacion）
{{$ubicacion->ubicacion}
@endforeach
地方爸爸
选择本地化
@foreach（$this->areas as$area）
id}}>{{$area->name}
@endforeach

这不允许我使用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;
    })

});

$（文档）.ready（函数（）{
var current\u fs，next\u fs，previous\u fs；//字段集
var不透明度；
$（“.next”）。单击（函数（）{
当前_fs=$（this.parent（）；
next_fs=$（this.parent（）.next（）；
//添加活动类
$（“.progressbar li”）.eq（$（“字段集”）.index（next_fs））.addClass（“活动”）；
//显示下一个字段集
next_fs.show（）；
//使用样式隐藏当前字段集
当前动画({
不透明度：0
}, {
步骤：功能（现在）{
//用于使Feelset显示动画
不透明度=1-现在；
当前_fs.css({
“显示”：“无”，
“位置”：“相对”
});
next_fs.css({
“不透明度”：不透明度
});
},
持续时间：600
});
});
$（“.previous”）。单击（函数（）{
当前_fs=$（this.parent（）；
previous_fs=$（this.parent（）.prev（）；
//删除活动类
$（“.progressbar li”）.eq（$（“字段集”）.index（当前_fs））.removeClass（“活动”）；
//显示上一个字段集
先前的_fs.show（）；
//使用样式隐藏当前字段集
当前动画({
不透明度：0
}, {
步骤：功能（现在）{
//用于使Feelset显示动画
不透明度=1-现在；
当前_fs.css({
“显示”：“无”，
“位置”：“相对”
});
以前的_fs.css({
“不透明度”：不透明度
});
},
持续时间：600
});
});
$（'.radio group.radio'）。单击（函数（）{
$（this.parent（）.find（'.radio'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
});
$（“.submit”）。单击（函数（）{
返回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>

省
自选省
@foreach（$ubicacions作为$ubicacion）
{{$ubicacion->ubicacion}
@endforeach
地方爸爸
选择本地化
@foreach（$this->areas as$area）
id}}>{{$area->name}
@endforeach

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

省
自选省
@foreach（$ubicacions作为$ubicacion）
{{$ubicacion->ubicacion}
@endforeach
地方爸爸
选择本地化
@foreach（$this->areas as$area）
id}}>{{$area->name}
@endforeach

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

---

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

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

---

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

Hello，如果我这样使用它，只有下拉菜单不起作用，WIRE:IGNORE会重新加载表单Hello，如果我这样使用它，只有下拉菜单不起作用，并且使用WIRE:IGNORE重新加载表单无论如何我不想利用你的慷慨，而是添加我的下一个视图按钮和javascript代码。你能给我举个例子吗？你能在一个实例中提供你的基本组件、视图和JavaScript吗？这将节省我大量的时间，并将产生您可以立即使用的代码。我不想利用您的慷慨，但添加我的下一个视图按钮和javascript代码。你能给我举个例子吗？你能提供你的基本组件，视图，