如何将选定的列表值放入vue中的数组中

Question

我有一个vue应用程序，必须从列表组件中选择两个元素，然后将它们放入数组中。现在我有了我的列表，我可以选择它们，这要归功于vuetify。我用v-model将它绑定到一个数组中。我可以在数组中控制台记录它，但我想实现的是这样的：

{
"meetingName":"",
"meetingUrl":"",
"participants":{
participant1: "Hasan",
participant2: "Turan"
}
}

相反，我现在得到的是：

{
"meetingName":"",
"meetingUrl":"",
"participants":[
"Hasan",
"Turan"
]
}

有人能看看我的代码，告诉我它出了什么问题吗？

html:

<template>
<v-container>
<v-row>
<v-col cols="4">
<v-card>
<v-list>
<v-list-item-group
v-model="model"
multiple
color="indigo"
v-model="model.participants"

>
<v-list-item
v-for="(item, i) in voterArrayFilteredByTime"
:key="item.voterUniqueName"
:value="item.voterUniqueName"
v-on:click= "generateGroup"
>
<v-list-item-content>
<v-list-item-title v-text="item.voterUniqueName"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
</v-col>
</v-container>
</template>

这是我想控制台记录它的方法，但它不像我说的那样工作，我只是在获取数字。

<script>
import axios from "axios";

export default {
name: "AddGroupsModal",

data : ()=>({
singleSelect: false,
selection: "",
model:{ meetingName: "", meetingUrl: "", participants: [] },
methods: {

generateGroup(){

console.log(this.model)
}
}

</script>

Answer 1

标记中的一个问题是它有两个到v-model的绑定，而应该只有一个(在本例中是最后一个(：

<v-list-item-group
v-model="model"❌
multiple
color="indigo"
v-model="model.participants"❌
>

v-list组件无法创建期望的值格式，但您可以使用计算道具和Array.prototype.reduce从数组条目创建对象：

export default {
computed: {
computedParticipants() {
return this.model.participants.reduce((obj, name, i) => {
obj[`participant${i + 1}`] = name
return obj
}, {})

// OR:
const obj = {}
this.model.participants.forEach((name, i) => {
obj[`participant${i + 1}`] = name
})
return obj
},
},
}

演示