Vue.js + PHP Select Input 在提交时不会持续存在

Posted 2023-02-22

【中文标题】Vue.js + PHP Select Input 在提交时不会持续存在

【英文标题】：Vue.js + PHP Select Input does not persist on submit

【发布时间】：2017-12-17 07:52:07

【问题描述】：

我的“问题”实际上是无知。我有一个 html 表单，我使用 Vue.js 用 php 数据填充 v-select 输入：

<div id="app">
    <form>
        <v-select name="user2_id" placeholder="Seleccionar Usuario" :options="[!! $users !!]" class="select"></v-select>
        <select name="user2_type" id="user2_type" class="form-control required">
        ...
        </select>
    </form>
</div>

JS部分：

<script src="https://unpkg.com/vue@2.1.10"></script>
<script src="https://unpkg.com/vue-select@2.0.0"></script>
<script>
    Vue.component('v-select', VueSelect.VueSelect);

    new Vue(
        el: '#app'
    );
</script>

当我提交表单时，我只得到了 user2_type，但没有得到 user2_id。我认为是因为浏览器无法将v-select 识别为表单输入。

有什么简单的方法或者我应该使用 AJAX 或其他方式提交表单吗？

谢谢

编辑：Web Inspector 生成的 HTML 输出

<div class="dropdown v-select select searchable" name="user2_id">
    <div type="button" class="dropdown-toggle clearfix">
        <input debounce="0" placeholder="Seleccionar Usuario" class="form-control" style="width: 100%;" type="search">
        <i role="presentation" class="open-indicator"></i>
        <div class="spinner" style="display: none;">
            Loading...
        </div>
    </div><!---->
</div>

【问题讨论】：

在浏览器的 Web 检查器中查看为 <v-select> 生成的代码。它是否包含带有name 参数的<select>？我在sagalbot.github.io/vue-select 的文档中没有看到name 参数

@ceejayoz，感谢您的回复。我在 web 检查器中添加了生成的 HTML。它也不包含选择或名称。

这就是你的答案。通常，Vue 组件会通过 AJAX 请求而不是标准表单提交来提交其数据，这可能就是为什么 vue-select 没有真正为您的用例设置的原因。您可能需要使用 vue-select 的值填充隐藏字段。

好的，那么，将其作为答案回复，我会将其标记为正确。谢谢。

他问了同样的问题：github.com/sagalbot/vue-select/issues/145

【参考方案1】：

vue-select 不会创建实际的 <select> 字段，因为在 Vue 组件中，任何表单提交通常都通过 AJAX 处理，而不是标准的 <form> POST。

您需要从 <v-select> 中获取值 - 有几种方法。

使用onChange 回调（请参阅the docs）手动更新字段。 使用 v-model 同时更新隐藏字段的值。

<v-select v-model="user2_id"></v-select>
<input type="hidden" v-model="user2_id">