Vue multiselect laravel submit form - laravel

Question

I have simple form:
<form action="" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<div class="form-group">
<tags-multiselect></tags-multiselect>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
And Vue tags-multiselect component:
<!-- Vue component -->
<template>
<div>
<multiselect v-model="value" :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :preserve-search="true" placeholder="Выберите тэги" label="name" track-by="name" :preselect-first="true">
<template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single" v-if="values.length && !isOpen">{{ values.length }} выбрано</span></template>
</multiselect>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
components: { Multiselect },
data () {
return {
value: [],
options: [
{ name: 'Vue.js', language: 'JavaScript' },
{ name: 'Adonis', language: 'JavaScript' },
{ name: 'Rails', language: 'Ruby' },
{ name: 'Sinatra', language: 'Ruby' },
{ name: 'Laravel', language: 'PHP' },
{ name: 'Phoenix', language: 'Elixir' }
]
}
}
}
</script>
<!-- New step!
Add Multiselect CSS. Can be added as a static asset or inside a component. -->
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
I need select field on the my form. When I send form, In controller I need accept array from select tags. How I can do this with vue multiselect? Or I need use simple select multiple for it? Help me please.

Answer 1

You can solve this by making the options only the identifier (in your case the name) and use a custom label that filters itself. Like this:
<multiselect
v-model="rule.id"
:options="types.map(type => type.name)"
:custom-label="opt => types.find(x => x.id == opt).language">
</multiselect>
Also make sure to remove trackBy property, since your options are no longer objects, its now an array of the form ['Vue.js', 'Adonis',...]
Source: https://github.com/shentao/vue-multiselect/issues/432