Vue-Select: Getting object selected value through page via POST method

Question

This is my reproduced code.

Vue.component('v-select', VueSelect.VueSelect);

var app = new Vue({
  el: '#app',
  data: {
    lokasi_select: '',
    lokasi_id: '',
    lokasi_list: [{
        id_Location: 'LOC0001',
        nama_Location: 'Indonesia'
      },
      {
        id_Location: 'LOC0002',
        nama_Location: 'China'
      },
      {
        id_Location: 'LOC0003',
        nama_Location: 'America'
      },
    ],
  }
});

<div id='app' class="form-group my-5 mx-5">
  <form method='post' action='action.php'>
    <label for="lokasi_id" class="control-label required">
      <strong>Lokasi</strong></label>
    <v-select id='lokasi_id' label='nama_Location' v-model='lokasi_select' name="lokasi_select" :options="lokasi_list" placeholder='Ketik lokasi..'>
      <span slot="no-options">Lokasi tidak ditemukan.</span>
    </v-select>

    <p>What you selected: {{lokasi_select}}</p>
    <button>Submit</button>
  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/2.5.1/vue-select.js"></script>

What I wanted to do

1. User input and select the values.
2. lokasi_select become an object and populated with the value of user's selected input.
3. User click submit. Moved to action.php.
4. action.php retrieve the value.

Get the value of the selected object, in this case it's lokasi_select then retrieve it in another page, be noted this is a form through POST method, which loads to the next page. I'm not using AJAX, cause I want to re-validate the user input on the next page. Like showing the receipt.

What's actually happened

1. User input and select the values.
2. lokasi_select become an object and populated with the value of user's selected input.
3. User click submit. Moved to action.php.
4. $_POST returns an array of NULL.

Now this is what my action.php looks like.

<?php
    var_dump($_POST) //Returns array(0) { }
?>

How could this be done? I'm open to alternative. But not AJAX. It has to reload to the next page. Also, if I can't pass an object, then only the value of id_Location is fine. Cause I had a hard time finding out how to make it pass to id_Location as well.

Answer 1

By referring to this issue, I think you need add hidden inputs as below.
I have confirmed PHP can receive post values by this code.

<div id='app' class="form-group my-5 mx-5">
  <form method='post' action='action.php'>
    <label for="lokasi_id" class="control-label required">
    <strong>Lokasi</strong></label>
    <v-select id='lokasi_id' label='nama_Location' v-model='lokasi_select' name="lokasi_select" :options="lokasi_list" placeholder='Ketik lokasi..'>
      <span slot="no-options">Lokasi tidak ditemukan.</span>
    </v-select>
    <input type="hidden" v-model="lokasi_select.id_Location" name="id_Location" />
    <input type="hidden" v-model="lokasi_select.nama_Location" name="nama_Location" />

    <p>What you selected: {{lokasi_select}}</p>
    <button>Submit</button>
  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/2.5.1/vue-select.js"></script>

<?php
    // Returns like
    // "array(2) { ["id_Location"]=> string(7) "LOC0001" ["nama_Location"]=> string(9) "Indonesia" }"
    var_dump($_POST);
?>