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>

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

Vue Multiselect Laravel提交表单

1 个答案: