javascript - 绑定(bind)的输入值未出现在请求中

Question

我正在尝试绑定(bind) 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 值未绑定(bind)到输入)。使用 $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>