2017-07-12 18:34 阅读 102

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

My "issue" is actually ignorance. I have an HTML form and I use Vue.js to fill a v-select input with PHP data:

<div id="app">
        <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">

The JS part:

<script src=""></script>
<script src=""></script>
    Vue.component('v-select', VueSelect.VueSelect);

    new Vue({
        el: '#app'

When I submit the form I only got the user2_type but not the user2_id. I think is because the browser does not recognize v-select as a form input.

Is there any easy way or should I submit the form with AJAX or something else?

Thank you

Edit: Web Inspector generated HTML output

<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;">
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    duancoubeng5909 duancoubeng5909 2017-07-12 19:03

    vue-select does not create an actual <select> field, as in Vue components any form submissions are typically processed via AJAX, not a standard <form> POST.

    You'll need to get the value out of the <v-select> - there are a couple of ways.

    • Use a onChange callback (see the docs) to update a field manually.
    • Use v-model to update a hidden field simultaneously with the value.
      <v-select v-model="user2_id"></v-select>
      <input type="hidden" v-model="user2_id">
    点赞 6 评论 复制链接分享