vue-multiselectを利用し、submitでPOST送信したい

vue-multiselectを利用し、複数選択フォームを作成しています。
https://vue-multiselect.js.org/#sub-tagging

submitでPOST送信したいのですが、どうしたら良いでしょうか？

selectの場合、

html
1<select>
2<option value="1">A</option>
3<option value="2">B</option>
4</select>

と書けば、1とか2という値が渡されると思います。

それと同じように、vue-multiselectを使って、

<option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="4">D</option> <option value="5">E</option> のように1、2、3、4、5の値を渡したいです。（フォームに表示されるのは、A、B、C、D、Eです。）

下記のサイトには、「1つ注意点としては、selectタグを操作している訳では無いので、POST値で飛ばす時にはinput=hiddonなどにデータを持たせる必要があります。」とあるのですが、そこが良く分かりません。
https://www.kabanoki.net/4224/

現状下記のように書いています。

html
1<form method="post">
2    <div id="app">
3        <multiselect
4            v-model="selected"
5            :options="options"
6            :multiple="true"
7            :close-on-select="true"
8            placeholder="choice tags">
9        </multiselect>
10    </div>
11    <button type="submit">登録</button>
12</form>
13
14<script>
15    Vue.component('multiselect', window.VueMultiselect.default)
16    new Vue({
17        el: "#app",
18        data: {
19            selected: ['A', 'B'],
20            options: ['A', 'B', 'C', 'D', 'E']
21        },
22    })
23</script>

どのように記載すべきか、ご教示頂けましたらありがたいです。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のように記述すれば、selectImtes: A,Bというように送信することができます。
inputタグhiddenで画面上は表示しないようにしvalueで選択中(selected)のアイテムを持ちます。
※ nameで送信したい任意の項目名を指定できます。例ではselectItemsとしました。

html
1    <form method="post">
2      <div id="app">
3          <multiselect
4              v-model="selected"
5              :options="options"
6              :multiple="true"
7              :close-on-select="true"
8              placeholder="choice tags">
9          </multiselect>
10          <input type="hidden" name="selectItems" :value="selected"> // こちらを追加
11      </div>
12      <button type="submit">登録</button>
13    </form>