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

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">&nbsp; &nbsp; @csrf&nbsp; &nbsp; <div x-data="{&nbsp; &nbsp; &nbsp; &nbsp; backAfterSaveStatus: '',&nbsp; &nbsp; &nbsp; &nbsp; backAfterSave () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.backAfterSaveStatus = '1';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$nextTick(() => { document.querySelector('form.withBackAfterSave').submit() });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }">&nbsp; &nbsp; &nbsp; &nbsp; <input name="backAfterSave" x-bind:value="backAfterSaveStatus">&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button x-on:click.prevent="backAfterSave()" type="submit">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Save & back&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="submit">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Save&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></form>

Answer 2

刚刚发布，我可以使用带有自定义名称和给定值的简单按钮。不需要 javascript :)<button&nbsp;type="submit"&nbsp;name="back-after-submit"&nbsp;value="1">Save</button>

Answer 3

我不使用x-ref，因为这些按钮位于单独的layouts文件中，所以我无法将其移出x-data范围。我的最终代码：<div class="pt-5">&nbsp; &nbsp; <div class="flex justify-end" x-data="{&nbsp; &nbsp; &nbsp; &nbsp; backAfterSave: 0&nbsp; &nbsp; }">&nbsp; &nbsp; &nbsp; &nbsp; <input type="hidden" name="backAfterSave" :value="backAfterSave">&nbsp; &nbsp; &nbsp; &nbsp; <button type="button"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ __('Cancel') }}&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; <button type="submit"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @click.prevent="backAfterSave=1; $nextTick(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.querySelector('form.with-back-after-save').submit()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ __('Save & back') }}&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; <button type="submit"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ __('Save') }}&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; </div></div>