РЕШЕНИЕ Таблица данных Vuetify в режиме одиночного выбора, при выборе одной строки выбираются все остальные - PullRequest
Новая
       90

РЕШЕНИЕ Таблица данных Vuetify в режиме одиночного выбора, при выборе одной строки выбираются все остальные

0 голосов
/ 29 мая 2020

Я пытаюсь выбрать одну строку в таблице и выдать выбранный элемент.

При выборе одной выбираются все, но только первый обнаруженный объект сохраняется в модели (как переменная selected).

Есть идеи, что я делаю не так?

enter image description here

<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>

1 Ответ

0 голосов
/ 29 мая 2020

Из примера в docs я вижу следующее:

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>
...