Vue 多选 laravel 提交表单答案

【问题标题】：Vue multiselect laravel submit formVue 多选 laravel 提交表单
【发布时间】：2019-06-07 22:07:45
【问题描述】：

我的表格很简单：

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

还有 Vue 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 多选来做到这一点？或者我需要使用简单的选择多个吗？请帮帮我。

【问题讨论】：

stackoverflow.com/questions/50235112/…

标签： laravel vue.js vue-multiselect

【解决方案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

【讨论】：