vue.js - 如何从 Vuetify 的 v-data-table 中删除单击的行？

Question

我正在学习 Vuetify 并将数据从数据库加载到 Vuetify v-data-table。我想要一种行为，当我点击一行时，它会从表中删除。这可能吗？

我正在尝试从 onClick 方法获取行的索引，但到目前为止还没有成功。

Answer 1

您需要改变心态，因为您不会删除一行，而是会删除列表中的一项。

请参见下面的代码：

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

在我的示例中，我在 item.xml 中设置了一个新属性（“已删除”）。但是您可以删除数组的元素。