javascript - vue中如何改变数组结构
问题描述
我有一个 vuetify 表,其中包含多个值,包括日期、开始和结束时间以及选民姓名。我想知道的是按下按钮单击两个选定的行到一个新的数组对象中。我可以将选定的行推送到一个数组中,但它们中的每一个都是我数组中的单独对象,但这不是我想要的。
如果我正确知道,这就是我得到的:
{
"meetingUrl":"",
"participants":[
{
"name1":"mert",
"name2":"mehmet"
}
]
}
但我想要得到的是以下内容:
{
"voterUniqueName": "Hasan",
"voterUniqueName2": "Turan",
"meetingUrl":"test",
"meetingName": "test"
},
我想像这样简化数组。
但我有点卡住了,不知道如何改变这一点。也许有人可以给我一个指针。
我试过这样的事情:
this.array.participant1 = this.array2.name1
但这给了我一个未定义的错误
HTML:
<v-data-table
v-model="selected"
:headers="headers"
:items="filterByDate"
item-key="voterUniqueName"
show-select
class="elevation-1"
>
<template v-slot:top>
<v-col cols="3">
<v-select
:items="availableTimes"
item-text="date"
@select="filterByDate"
v-model="selectedDate"
></v-select>
</v-col>
<v-col cols="12">
<v-chip-group
v-model="selection"
active-class="deep-purple--text text--accent-4">
<v-chip
v-for="(time, i) in dateTimeArray"
:key="time"
:value="time"
@click="getTimesFiltered(time)">
{{ time.startTime +" : "+ time.endTime }}
</v-chip>
</v-chip-group>
</v-col>
</template>
</v-data-table>
脚本:
<script>
import axios from "axios";
export default {
name: "MeetingAdminComponent",
data : ()=>({
singleSelect: false,
selected: [],
meetingArray: [],
headers: [
{
text: 'Date',
align: 'center',
value: 'date',
},
{ text: 'Voter', value: 'voterUniqueName' },
{ text: 'Starttime', value: 'startTime' },
{ text: 'Endtime', value: 'endTime' },
],
availableTimes: [
],
}),
methods:{
pushSelected(){
const newMeeting = {};
const newMeeting2 = [];
this.selected.forEach((voter, i) => {
const key = `name${i + 1}`;
newMeeting[key] = voter.voterUniqueName;
})
this.meetingArray.participants.push(newMeeting)
console.log(JSON.stringify(this.meetingArray))
}
}
};
</script>
解决方案
推荐阅读
- asp.net-core - 如何从 asp.net core mvc 中的另一个控制器访问 GET 方法?
- aws-lambda - VPC 中的 Terraform Lambda(与 MongoDB Atlas 对等)连接 NAT 网关
- docker - 来自 RUN apache reload 的 docker-compose up 上存在的 Docker 容器
- android - 如何修改\转换飞镖上的非法字符?
- python - pyodbc.Row object: what are the tuple values
- hittest - 在 Spark AR 的平面跟踪器上点击屏幕底部的测试中心
- c# - 如何在 c# 中的 iTextsharp 中将图像添加到 acrofield?
- julia - 是否可以在 Julia 中使用非线性函数 ifor 目标?
- cakephp - 对同一模型使用多个数据库
- r - R. n Previous Elements in a data frame of another column