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

【问题标题】：Binded input value does not appear in request绑定的输入值未出现在请求中
【发布时间】：2021-03-05 07:51:15
【问题描述】：

我正在尝试将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);
}

【问题讨论】：

在submit()方法中调用backAfterSaveStatus = 0之后，不需要重置backAfterSaveStatus = 0的值吗
我也试过了，但主要问题是表单提交后的第一次值为空。
@keizah 这个问题是 alpine/php 特有的还是也可以使用 JS 来解决？所以要恢复，当表单提交时，只有提交后，你希望能够点击按钮保存并返回并在输入字段中显示1，对吗？
我复制了这个问题并使用$nextTick magic property解决了它

标签： javascript html laravel alpine.js

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：