亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

綁定的輸入值未出現在請求中

綁定的輸入值未出現在請求中

喵喵時光機 2023-08-24 15:30:56
我試圖將backAfterSaveStatus值綁定到隱藏輸入,由于某種原因,提交的表單backAfterSave值為空。之后我返回并再次提交表單 -backAfterSave值為 1。問題出在哪里?我嘗試了同樣的事情prevent,submit()但它仍然不起作用。x-text另外,我在表單提交之前轉儲了 div,并且代碼使隱藏輸入 1 。我做錯了什么?<form action="<...>" method="post">    <div x-data="{        backAfterSaveStatus: '',        backAfterSave () {            this.backAfterSaveStatus = '1';            document.querySelector('form.withBackAfterSave').submit();        }    }">        <input name="backAfterSave" :value="backAfterSaveStatus">        <div>            <span>                <button x-on:click.prevent="backAfterSave()" type="submit">                    Save & back                </button>            </span>            <span>                <button type="submit">                    Save                </button>            </span>        </div>    </div></form>我想要與下面相同的結果:let buttonBackAfterSave = document.getElementById('button-back-after-save');if (buttonBackAfterSave) {    buttonBackAfterSave.addEventListener('click',  () => document.getElementById('input-back-after-save').value = 1);}
查看完整描述

3 回答

?
汪汪一只貓

TA貢獻1898條經驗 獲得超8個贊

問題是提交的表單“太快”(backAfterSaveStatus 值未完成與輸入的綁定)。使用 $nextTick 以便 Alpine 等待,直到值被正確更改。


<form method="post" class="withBackAfterSave">

    @csrf

    <div x-data="{

        backAfterSaveStatus: '',

        backAfterSave () {

            this.backAfterSaveStatus = '1';

            this.$nextTick(() => { document.querySelector('form.withBackAfterSave').submit() });

        }

    }">

        <input name="backAfterSave" x-bind:value="backAfterSaveStatus">

        <div>

            <span>

                <button x-on:click.prevent="backAfterSave()" type="submit">

                    Save & back

                </button>

            </span>

            <span>

                <button type="submit">

                    Save

                </button>

            </span>

        </div>

    </div>

</form>


查看完整回答
反對 回復 2023-08-24
?
牛魔王的故事

TA貢獻1830條經驗 獲得超3個贊

剛剛發布,我可以使用帶有自定義名稱和給定值的簡單按鈕。不需要 javascript :)

<button type="submit" name="back-after-submit" value="1">Save</button>


查看完整回答
反對 回復 2023-08-24
?
躍然一笑

TA貢獻1826條經驗 獲得超6個贊

我不使用x-ref,因為這些按鈕位于單獨的layouts文件中,所以我無法將其移出x-data范圍。我的最終代碼:


<div class="pt-5">

    <div class="flex justify-end" x-data="{

        backAfterSave: 0

    }">

        <input type="hidden" name="backAfterSave" :value="backAfterSave">

        <button type="button"

                class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">

            {{ __('Cancel') }}

        </button>

        <button type="submit"

                @click.prevent="backAfterSave=1; $nextTick(() => {

                    document.querySelector('form.with-back-after-save').submit()

                })"

                class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">

            {{ __('Save & back') }}

        </button>

        <button type="submit"

                class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">

            {{ __('Save') }}

        </button>

    </div>

</div>


查看完整回答
反對 回復 2023-08-24
  • 3 回答
  • 0 關注
  • 229 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號