使用 vue-multiselect 将对象数组从 vue 传递到 laravel
Passing array of objects from vue to laravel using vue-multiselect
我正在使用 vue multiselect 包,当使用 <multiselect>
代替传统的 <select>
我 运行 遇到了问题。在我的 vue 组件中,我传入了一个包含对象数组的道具,每个对象都有不同的属性。使用 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: [],
}
},
您需要为 multi-select 自定义标签和选项。为此。
: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>
我正在使用 vue multiselect 包,当使用 <multiselect>
代替传统的 <select>
我 运行 遇到了问题。在我的 vue 组件中,我传入了一个包含对象数组的道具,每个对象都有不同的属性。使用 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: [],
}
},
您需要为 multi-select 自定义标签和选项。为此。
: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>