Vuetify 数据表格在单选模式下，选择一行会选择所有其他行。

Question

我正在尝试选择表格中的一行并发出所选项。

选择一个会选择所有内容，但只有第一个遇到的对象会保存到模型中（作为selected变量）。

你有什么想法，我做错了什么吗？

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :search="search"
    :loading="loading"
    v-model="selected"
    single-select
    show-select
    :options="{itemsPerPage:5}"
    @item-selected="itemSelected"
  >
    <template v-slot:top>
      <v-toolbar flat>
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          label="Search"
          single-line
          hide-details
        ></v-text-field>
      </v-toolbar>
    </template>

    <template v-slot:item.name="{ item }">{{ item.name }}</template>
  </v-data-table>
</template>

<script>
export default {
  name: "variable-selector",
  props: ["variables", "map", "index"],
  data() {
    return {
      search: "",
      selected: {},
      loading: false,
      items: [],
      headers: [{ text: "Variable name", value: "name", sortable: true }]
    };
  },
  methods: {
    itemSelected(selection) {
      if (selection.value) {
        this.$emit("selected", selection.item); // it always emits var_2 object
      } else {
        this.$emit("selected", null);
      }
    },

    updateItemsList(variables) {
      this.items = Array.from(variables);
    }
  },

  mounted() {
    this.updateItemsList(this.variables);
  },

  watch: {
    variables(newValue) {
      this.loading = true;
      this.updateItemsList(newValue);
      this.loading = false;
    }
  }
};
</script>

- Piotr Płaczek

---

请创建一个答案，而不是将解决方案公告编辑到问题中。或者只需使用旁边的勾号接受最佳答案。 - Yunnosch

Answer 1

每个对象都应该有唯一的键值，如果您遇到错误，需要手动指定每个对象是唯一的。只需添加：

item-key="table_header_index"//or name 

例如：

<v-data-table
    :headers="headers"
    :items="items"
    show-select
    item-key="table_header_index"  <-------------------add this line
>

</v-data-table>

- Balaji

Answer 2

我遇到了这个问题，后来发现我的item-key="value"与我的标题中的任何一个值都不匹配。选择其中一个标题值，它应该能够工作。

- Josh

Answer 3

你的后端数据应该有主键。如果有，你的表格就能理解它；如果没有主键，就需要为表格编写项目键。

祝好运

- AMIN

Answer 4

从文档的示例中，我可以看到以下内容：

1.) selected 应该是一个数组，而不是一个对象

Selected 包含所有选定的值。 single-select 属性只是确定长度是否可以大于 1。

2.) 如果使用 v-model，则不应使用 @item-selected="itemSelected"

v-model 已经是双向绑定了。但是你触发了一个额外的事件并覆盖了模型（应该是一个数组）与一个 object 或 null

解决方案

将 selected 改为数组，并删除 @item-selected="itemSelected"。

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :search="search"
    :loading="loading"
    v-model="selected"
    single-select
    show-select
    :options="{itemsPerPage:5}"
  >
    <template v-slot:top>
      <v-toolbar flat>
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          label="Search"
          single-line
          hide-details
        ></v-text-field>
      </v-toolbar>
    </template>

    <template v-slot:item.name="{ item }">{{ item.name }}</template>
  </v-data-table>
</template>

<script>
export default {
  name: "variable-selector",
  props: ["variables", "map", "index"],
  data() {
    return {
      search: "",
      selected: [],
      loading: false,
      items: [],
      headers: [{ text: "Variable name", value: "name", sortable: true }]
    };
  },
  methods: {
    updateItemsList(variables) {
      this.items = Array.from(variables);
    }
  },

  mounted() {
    this.updateItemsList(this.variables);
  },

  watch: {
    variables(newValue) {
      this.loading = true;
      this.updateItemsList(newValue);
      this.loading = false;
    }
  }
};
</script>

- oshell

---

我忘记了这个线程... 解决这个问题的方法是在 v-data-table 中添加参数 selectable-key="name" 和 item-key="name"，并将默认值设置为 "id"。我的项目没有这样的字段，因此需要说明检查的内容。 - Piotr Płaczek

Answer 5

2023年11月的快速更新，我在一个Vue3/vuetify应用中遇到了完全相同的问题，上述解决方案并没有解决它。我需要使用item-value="my-key"而不是item-key。

<v-data-table :headers="headers" :items="things" :search="search"
            show-select item-value="SortKey" v-model="selected"
            :footer-props="{ 'items-per-page-options': [10, 25, 50, 100] }"
            :sort-by="['Name']">

然后在设置脚本中，我正在创建：

headers: [
        { title: 'Some Field', value: 'SortKey' }
      ]

- shearn89