2

我正在使用 vue multiselect 包，当使用<multiselect>代替传统包时，<select>我遇到了问题。在我的 vue 组件中，我传入了一个包含对象数组的道具，每个对象都有各种属性。使用 vue 中的传统选择，您可以使用循环遍历数组v-for，然后传递基于的值object.id，有没有办法使用 vue-multiselect 包做到这一点？不确定之前是否有人尝试将其用作表单的一部分，但值得一问。谢谢。

我的 Vue 文件

<multiselect
        v-model="users"
        :options="usersArray"
        :multiple="true"
        :clear-on-select="false"
        :preserve-search="false"
        placeholder="select users"
        label="name"
        track-by="name"
        :preselect-first="false"
        id="users"
        name="users[]"
    ></multiselect>


export default {
  props: {
    'usersArray': Array,
  },
  data(){
    return {
      users: [],
    }
  },
4

1 回答 1

2

您需要自定义多选的标签和选项。为了这。

:options="usersArray.map(user => user.id)" 
:custom-label="opt => usersArray.find(x => x.id == opt).name"

下面的工作片段：

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data: {
    users: [],
    usersArray: [{
        id: 1,
        name: "A"
      },
      {
        id: 2,
        name: "B"
      },
      {
        id: 3,
        name: "C"
      },
      {
        id: 4,
        name: "D"
      },
    ]
  },
}).$mount('#app')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.6"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
<div id="app">
  <multiselect v-model="users" :options="usersArray.map(user => user.id)" :custom-label="opt => usersArray.find(x => x.id == opt).name" :multiple="true" :clear-on-select="false" :preserve-search="false">
  </multiselect>
  <pre>{{ users }}</pre>
</div>

于 2020-11-03T02:35:37.143 回答