首页 > 解决方案 > 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>

标签: javascripttypescriptvue.jsvuetify.js

解决方案


推荐阅读