Vue.js + PHP Select Input does not persist on submit

Question

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">
    <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>

The JS part:

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script>
    Vue.component('v-select', VueSelect.VueSelect);

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

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;">
            Loading...
        </div>
    </div><!---->
</div>

Look in your browser's web inspector at the generated code for the <v-select>. Does it include a <select> with a name parameter? I don't see a name parameter in the docs at sagalbot.github.io/vue-select — ceejayoz
– ceejayoz, Commented Jul 12, 2017 at 18:38
@ceejayoz, thanks for replying. I added the generated HTML in web inspector. It doesn't contain a select or a name either. — Maramal
– Maramal, Commented Jul 12, 2017 at 18:47
There's your answer, then. Typically, a Vue component would submit its data via an AJAX request, not a standard form submission, which is probably why vue-select isn't really set up for your use case. You'll probably need to populate a hidden field with the value of the vue-select. — ceejayoz
– ceejayoz, Commented Jul 12, 2017 at 18:48
okay then, reply it as an answer and I will mark it as correct. Thank you. — Maramal
– Maramal, Commented Jul 12, 2017 at 18:50
There he asks the same: github.com/sagalbot/vue-select/issues/145 — Maramal
– Maramal, Commented Jul 12, 2017 at 19:04

ceejayoz · Accepted Answer · 2017-07-12 19:03:55Z

3

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">

answered Jul 12, 2017 at 19:03

ceejayoz

181k42 gold badges311 silver badges382 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js + PHP Select Input does not persist on submit

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related