Как удалить кликованную строку из v-data-таблицы в Vuetify? - PullRequest
Новая
       28

Как удалить кликованную строку из v-data-таблицы в Vuetify?

0 голосов
/ 21 апреля 2020

Я изучаю Vuetify и загружаю данные из базы данных в v-data-таблицу Vuetify. Мне бы хотелось, чтобы при нажатии на строку она удалялась из таблицы. Возможно ли это?

Я пытаюсь получить индекс строки из метода onClick, но пока безуспешно.

1 Ответ

1 голос
/ 21 апреля 2020

Вам нужно изменить свое мышление, потому что вы не удалите строку, вы удалите элемент из вашего списка.

См. Код ниже: 

<template>
  <div>
    <v-app>
      <v-content class="pa-4">
        <v-data-table :headers="headers" :items="validItems" @click:row="deleteItem" />
      </v-content>
    </v-app>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    items: [
      { id: 1, name: 'Option 1', description: 'Lorem ipsum dolor sit amet' },
      { id: 2, name: 'Option 2', description: 'Lorem ipsum dolor sit amet' },
      { id: 3, name: 'Option 3', description: 'Lorem ipsum dolor sit amet' },
      { id: 4, name: 'Option 4', description: 'Lorem ipsum dolor sit amet' },
      { id: 5, name: 'Option 5', description: 'Lorem ipsum dolor sit amet' },
      { id: 6, name: 'Option 6', description: 'Lorem ipsum dolor sit amet' },
      { id: 7, name: 'Option 7', description: 'Lorem ipsum dolor sit amet' },
      { id: 8, name: 'Option 8', description: 'Lorem ipsum dolor sit amet' },
      { id: 9, name: 'Option 9', description: 'Lorem ipsum dolor sit amet' },
    ],
    headers: [
      { text: 'Id', value: 'id' },
      { text: 'Name', value: 'name' },
      { text: 'Description', value: 'description' },
    ],
  }),
  computed: {
    validItems() {
      return this.items.filter(item => !item['deleted']);
    },
  },
  methods: {
    deleteItem(item) {
      this.$set(item, 'deleted', true);
    },
  },
};
</script>

В моем примере Я установил новое свойство («удалено») в элементе. Но вы можете удалить элемент массива.

...