小编Son*_*nia的帖子

我一直在慢慢学习 vue.js 和 Vuetify 的乐趣。我试图将电子邮件和网站作为工作链接，但就是不知道该怎么做。

我有我的 v 数据表

 <v-data-table :headers="headers" :items="companies" :search.sync="search" :items-per-page="5">

在我的脚本中，我首先拥有：

    data: () => ({
    headers: [
      { text: "Bedrijfsnaam", align: "start", value: "name" },
      { text: "Telefoon", value: "phone" },
      { text: "e-Mail", value: "email" },
      { text: "Website", value: "website" },
      { text: "Locatie", value: "location" },
      { text: "Actions", value: "actions", sortable: false }
    ],
    companies: [],
  }),

最后

  methods: {
    initialize() {
      this.companies = [
        {
          name: "Lorem NV",
          phone: "+32 1 234 …

我的数据表的每一行都有一个编辑和删除图标。当使用下面的代码并按删除图标时，我会弹出一个系统窗口，并且该行会按照我想要的方式删除。很完美。

        <template v-slot:item.actions="{ item }">
           <v-icon small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
           <v-icon small text @click="deleteItem(item)">mdi-delete</v-icon>
        </template>

方法脚本：

deleteItem(item) {
   const index = this.companies.indexOf(item);
   confirm("Are you sure you want to delete this item?") &&
   this.companies.splice(index, 1);
},

现在我想要一个漂亮的对话框，而不是系统弹出窗口。就像https://codepen.io/anon/pen/pYzZPZ?editors=1010中一样。

所以我编写了这段代码：

        <template v-slot:item.actions="{ item }">
      <v-icon small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
      <v-icon small @click="dialog2 = true">mdi-delete</v-icon>
      <v-dialog v-model="dialog2" max-width="500px">
        <v-card>
          <v-card-title>Verwijderen</v-card-title>
          <v-card-text>Weet je zeker dat je {{item.name}} wenst te verwijderen?</v-card-text>
          <v-card-actions>
            <v-btn color="primary" text @click="dialog2 = false">Close</v-btn>
            <v-btn color="primary" text @click="deleteItem(item)">Verwijderen</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </template> …