Vue-Select: получение значения выбранного объекта через страницу методом POST - PullRequest
Новая
       37

Vue-Select: получение значения выбранного объекта через страницу методом POST

0 голосов
/ 28 октября 2018

Это мой воспроизводимый код. 

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>

Что я хотел сделать

  1. Пользовательский ввод и выбор значений.
  2. lokasi_select становится объектом и заполняется значением выбранного пользователем ввода.
  3. Пользователь нажимает кнопку Отправить.Перемещено в action.php.
  4. action.php для получения значения.

Получите значение выбранного объекта, в данном случае это lokasi_select, затем получите его на другой странице,Следует отметить, что это форма через метод POST, который загружается на следующую страницу.Я не использую AJAX, потому что я хочу повторно подтвердить ввод пользователя на следующей странице.Как показ квитанции.

Что на самом деле произошло

  1. Ввод пользователя и выбор значений.
  2. lokasi_select становятся объектом и заполняютсясо значением выбранного пользователем ввода.
  3. Пользователь нажимает кнопку Отправить.Перемещено в action.php.
  4. $ _ POST возвращает массив NULL.

Теперь вот как выглядит мой action.php. 

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

Как это можно сделать? Я открыт для альтернативы.Но не AJAX.Это должно перезагрузить к следующей странице.Кроме того, если я не могу передать объект, тогда подходит только значение id_Location.Потому что мне было трудно понять, как заставить его перейти на id_Location.

1 Ответ

0 голосов
/ 28 октября 2018

Обращаясь к этой проблеме , я думаю, вам нужно добавить hidden входные данные, как показано ниже.
Я подтвердил, что PHP может получать значения постов по этому коду. 

<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);
?>
...