使用vue-multiselect将对象数组从vue传递到laravel

Question

我正在使用vue multiselect包，当使用<multiselect>代替传统的<select>时，我遇到了问题。在我的vue组件中，我传递了一个包含对象数组的prop，每个对象都有不同的属性。使用vue中的传统select，您可以使用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: [],
}
},

Answer 1

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

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