绑定的输入值未出现在请求中

Question

我试图将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);}

Answer 1

问题是提交的表单“太快”（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>

Answer 2

刚刚发布，我可以使用带有自定义名称和给定值的简单按钮。不需要 javascript :)

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

Answer 3

我不使用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>