Livewire model 綁定同時點擊其他元素

Question

我有一個非常簡單的問題。 每當我單擊 div 時，我都希望將data binding應用於文件輸入。

<div>click me</div>
<input type="file" wire:model="photo"> <!-- while clicking on div, it should do the data binding to this file input  -->

我一直在文檔中搜索它，但找不到任何線索。 有可能這樣做嗎？

Answer 1

Okei 我正在搜索和測試，看看我是否可以完成它，並且有一個解決方案 jquery：

<div id="trigger">click me</div>
<input type="file" id="file_input" wire:model="photo">

$("#trigger").unbind("click").bind("click", function () {
    $("#file_input").click();
});

我會在找到答案的地方給予信任：

觸發文件輸入按鈕

如果你的想法是只使用 livewire，你可以創建一個 function

public function fileTrigger(){
    $this->dispatchBrowserEvent('TriggerFilem');
}

將此添加到js：

window.addEventListener('TriggerFilem', e => {
    $("#trigger").unbind("click").bind("click", function () {
        $("#file_input").click();
});
}); 

並在視圖中：

<div wire:click="fileTrigger()" id="trigger">click me</div>
<input type="file" id="file_input" wire:model="photo">

編輯：

如果你不想使用 jquery，我只是在 js 上測試一個解決方案：

document.getElementById('trigger').addEventListener("click",() => {
    document.getElementById('file_input').click();
    
    });

希望能幫助到你！