如何在 vuetify 表中选择单个值

Question

我有一个 vuetify 表，我可以在其中选择稍后推送到数组的值。我的问题是我必须给表一个键才能选择/推送到数组。但是这个键会导致选择多行的问题。但我希望每个都是一个选择行。有人可以帮我解决这个问题吗？我有点坚持如何解决这个错误：我只是复制了我的表，因为问题在那里：

<v-col>
      <v-data-table
        v-model="selected"
        :headers="headers"
        :items="meetingTimes"
        item-key="date"
        show-select
        class="elevation-1"
      >

      </v-data-table>

axios 方法：

 getMeetingTimes() {
      var pageURL = window.location.href;
      var lastURLSegment = pageURL.substr(pageURL.lastIndexOf('/') + 1);
      axios.get("http://localhost:8080/api/meetingTime/findBy", {

        params: {
          meetingName: lastURLSegment,
        }

      })
        .then(response => (this.meetingTimes = response.data))

    },

Answer 1

表示多个项目具有相同的item-key 值，其中具有相同item-key 的项目显示为在表格中选择（demo 1）。

item-key 必须是唯一的以避免出现问题。您可以为数组中的每个项目添加一个id 属性，并从模板中删除item-key="date" 属性，因为"id" 是item-key 的默认值。

您可以将 API 响应的数组 map 放入一个新数组中，并使用 id 添加的属性：

let nextId = 0

export default {
  methods: {
    getMeetingTimes() {
      axios.get('/api/data').then(response => {
        // map `resp.data[]` to new array items, adding `id` property
        this.meetingTimes = response.data.map(time => ({
          id: nextId++,
          ...time
        }))
      })
    },
  },
}

由于您将选定的会议时间发送到不允许额外的 id 属性的后端，您可以在发送之前删除该属性，再次通过映射：

export default {
  methods: {
    sendSelectedTimes() {
      // map `selected[]` to new array, without `id` property
      const selectedTimes = this.selected?.map(time => {
        const { id, ...otherProps } = time
        return otherProps
      })

      console.log({ selectedTimes })
    }
  }
}

demo 2