Question

我有一个Bootstrap selectpicker元素，可以在第一个渲染器上正常工作。初始化为：

$(document).ready(function () {
    $('select').selectpicker();
});

但是在调用livewire的render函数后，<select>元素不再呈现为Bootstrap selectpicker。

遍历两个文档（相关的here和here部分），我认为以下代码可以解决该问题：

<script>
    document.addEventListener("livewire:load", function(event) {
        window.livewire.hook('afterDomUpdate', () => {
            $('select').selectpicker('refresh');
        });
    });
</script>

但这不起作用。我也尝试过：

$('select').selectpicker();

和

$('select').selectpicker('render');

在afterDomUpdate中都无法正常运行。如果我从控制台调用所有这些功能，则DOM不会更新<select>元素，因此实际上这些功能似乎不起作用。

Answer 1

以防其他人陷入困境，这是您的处理方式。

struct ContentView: View {
    
    @ObservedObject var settings = Settings()
    
    var body: some View {
        
        VStack{
            
            Spacer()
            
            Picker("/numbers", selection: self.$settings.viewIndex.animation(.spring())) {
                Text("View 0").tag(0)
                Text("View 1").tag(1)
                Text("View 2").tag(2)
            }
            .pickerStyle(SegmentedPickerStyle())
            
            Spacer()
            
            if(self.settings.viewIndex == 0){
                ZStack{
                    Text("View 0").font(.largeTitle)
                }.frame(width: UIScreen.main.bounds.width)
                    .transition(.move(edge: .leading))
            }
            
            if(self.settings.viewIndex == 1){
                ZStack{
                    Text("View 1").font(.largeTitle)
                }.frame(width: UIScreen.main.bounds.width)
                    .transition(.move(edge: self.settings.middleAnimationIsLeading ? .leading : .trailing))
            }
            
            if(self.settings.viewIndex == 2){
                ZStack{
                    Text("View 2").font(.largeTitle)
                }.frame(width: UIScreen.main.bounds.width)
                    .transition(.move(edge: .trailing))
            }
            
            Spacer()
        }
    }
}

class Settings: ObservableObject {
    @Published var viewIndex = 1{
        willSet(newValue){
            
            //View 1 should move from and to right edge
            if(viewIndex == 1 && newValue == 0 || viewIndex == 0 && newValue == 1){
                middleAnimationIsLeading = false
            }
            
            //View 1 should move from and to left edge
            if(viewIndex == 1 && newValue == 2 || viewIndex == 2 && newValue == 1){
                middleAnimationIsLeading = true
            }
        }
    }
    
    @Published var middleAnimationIsLeading = false {
        didSet {
            print("is leading: \(middleAnimationIsLeading)")
        }
    }
}

原因 from the creator of livewire himself: Caleb!

Answer 2

我认为，您每次更新dom时都会重新初始化选择器。这就是为什么无论何时使用

 $('select').selectpicker('refresh');

在您的livewire钩子内部，它基本上刷新了您dom中新鲜的初始化选择器。我正在猜测，因为按照上面的代码和语句，它应该可以工作，除非在幕后发生了我提到的错误。

我不知道我是否有意义。请在刷新之前检查您是否正在重新初始化它。让我知道

Answer 3

尝试

$('.selectpicker').selectpicker('refresh');

我知道这实际上与您的相同，但就我而言，并非所有选择都是引导选择，因此仅针对.selectpicker类似乎具有预期的效果。可能是鲱鱼，但对我有用。

Answer 4

只需在您的html LiveData标签上添加wire:ignore

在Laravel livewire渲染后，引导程序选择不起作用

4 个答案: