如何在 vuetify 中将两个表值组合到一个数组中答案

【问题标题】：how to combine two table values to one array in vuetify如何在 vuetify 中将两个表值组合到一个数组中
【发布时间】：2021-09-07 07:55:10
【问题描述】：

我有一个 vuetify 表，其中包含多个值，包括日期、开始和结束时间以及选民姓名。我想知道的是按下按钮单击两个选定的行到一个新的数组对象中。我可以将选定的行推送到一个数组中，但它们中的每一个都是我数组中的单独对象，但这不是我想要的。

如果我推送整个数组，这就是我得到的结果：

{
   "id":null,
   "date":"2021-06-18",
   "startTime":"23:00",
   "endTime":"23:30",
   "voterUniqueName":"Hasan",
   "meetingName":"hallo"
},
{
   "id":null,
   "date":"2021-06-18",
   "startTime":"23:00",
   "endTime":"23:30",
   "voterUniqueName":"Turan",
   "meetingName":"hallo"
}

但我想要得到的是以下内容：

{ 
"voterUniqueName": "Hasan", 
"voterUniqueName2": "Turan" 
},

我想像这两个一数组对象一样简化两个值。

但是当我尝试推送数组的名称时，我得到一个未定义的。有人可以看看我的代码并告诉我我的错误在哪里吗？

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(){
      this.meetingArray.push({
        name1: this.selected.name,
        name2: this.selected.name
      })
      console.log(this.meetingArray)


    }
  }
};
</script>

【问题讨论】：

标签： javascript typescript vue.js vuetify.js

【解决方案1】：

如果你想要达到的目标是这样的：

{ 
"voterUniqueName": "Hasan", 
"voterUniqueName2": "Turan" 
}

然后简单地做这样的事情：

// In your case this will be the selected items: this.selected
const voters = [
{
   "id":null,
   "date":"2021-06-18",
   "startTime":"23:00",
   "endTime":"23:30",
   "voterUniqueName":"Hasan",
   "meetingName":"hallo"
},
{
   "id":null,
   "date":"2021-06-18",
   "startTime":"23:00",
   "endTime":"23:30",
   "voterUniqueName":"Turan",
   "meetingName":"hallo"
}
]

// Create an empty object to join the items
const joinedVoters = {};
voters.forEach((voter, index) => {
  // Gets the voter position plus one for the key
  const item = index + 1; 
  // This will insert the "voterUniqueName in the position 0 of the array as the key "name1" 
  joinedVoters[`name${item}`] = voter.voterUniqueName;
})
console.log(joinedVoters)

对于您的具体情况，您的方法最终应该是这样的：

methods:{
  
    pushSelected(){

      const newMeeting = {};

      this.selected.forEach((voter, i) => {
          const key = `name${i + 1}`;
          newMeeting[key] = voter.voterUniqueName;
      })

      this.meetingArray.push(newMeeting);
      console.log(this.meetingArray)

    }
  }

【讨论】：

您好，感谢您的回答，我试过了，但我得到的名称是未定义的。如果我这样做 voter.voterUniqueName，名称是未定义的，它说我应该生成一个名为 voterUniqueName 的变量，在从表中选择一行后填充选民数组，可能是因为这个吗？
我刚刚完成了我的答案的编辑，以展示您的案例的方法最终应该是什么样子的想法。它仍然给你同样的问题吗？
您好，抱歉回复晚了，我今天因为工作不得不去睡觉，我会试试这个，然后再报告。
嘿，我刚刚尝试过，但出现错误：this.meetingArray.push 不是函数。这是因为 meetingArray 最初是空的吗？
您必须将数组初始化为空数组[]，以便您可以将对象推入其中。

【解决方案2】：

只是一个问题，我注意到我的结构与我在问题中提出的完全错误。我应该发布一个新问题并将其标记为已关闭，还是应该只更新我的问题？

【讨论】：