Vue multiselect laravel отправить форму

Question

У меня есть простая форма:

<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>

И вю tags-multiselect составная часть:

<!-- 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 &amp;&amp; !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>

Мне нужно выбрать поле в моей форме. Когда я отправляю форму, в контроллере мне нужно принять массив из тегов выбора. Как я могу сделать это с помощью Vue Multiselect? Или мне нужно использовать простой выбор нескольких для этого? Помоги мне, пожалуйста.

Answer 1

Вы можете решить эту проблему, сделав для параметров только идентификатор (в вашем случае имя) и используя настраиваемую метку, которая фильтрует себя. Нравится:

<multiselect 
  v-model="rule.id" 
  :options="types.map(type => type.name)" 
  :custom-label="opt => types.find(x => x.id == opt).language">
</multiselect>

Также не забудьте удалить trackBy свойство, поскольку ваши параметры больше не являются объектами, теперь это массив формы ['Vue.js', 'Adonis',...]

Источник: https://github.com/shentao/vue-multiselect/issues/432