Vue-Select：通过POST方法通过页面获取对象选择值

Question

这是我转载的代码。

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>

我想做的事

用户输入和select值。
lokasi_select 成为对象并填充用户 selected 输入的值。
用户点击提交。移至 action.php.
action.php 检索值。

获取selected对象的值，在本例中是lokasi_select然后在另一个页面中检索它，注意这是一个通过POST方法加载的表单到下一页。我没有使用 AJAX，因为我想在下一页重新验证用户输入。喜欢出示收据。

实际发生了什么

用户输入和select值。
lokasi_select 成为对象并填充用户 selected 输入的值。
用户点击提交。移至 action.php.
$_POST returns NULL 数组。

这就是我的 action.php 的样子。

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

如何做到这一点？ 我愿意接受其他选择。但不是 AJAX。它必须重新加载到下一页。另外，如果我不能传递一个对象，那么只有 id_Location 的值是可以的。因为我很难找到如何让它也传递给 id_Location。

Answer 1

参考this issue，我认为你需要添加hidden输入如下。
我已经确认 PHP 可以通过此代码接收 post 值。

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

Vue-Select：通过POST方法通过页面获取对象选择值

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

html

php

forms

vuejs2

vue-select