Vue.js + PHP 选择输入在提交时不会保留

Question

我的"问题"实际上是无知。我有一个 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 或其他东西提交表单？

谢谢

编辑：网页检查器生成的 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>

Answer 1

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

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

• 使用onChange回调(请参阅文档(手动更新字段。
• 使用 v-model 在更新隐藏字段的同时更新该值。

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