Vuetify 中的 v-form 和 v-card 有什么区别？

Question

我刚刚学习 Vuetify，并打算用它在 Laravel 中构建有吸引力的 Vue 组件。 （我也是 Laravel 和 Vue 的新手。）我正在尝试构建一个 CRUD 并使用文档中 the v-table page 末尾描述的 Vuetify v-table。通过模仿这个模型，我们发现了一些问题。

1. 该模型使用 v-dialog 来显示 Create 和 Update 页面，但在文档的其他地方，作者不鼓励将 v-dialogs 用于大多数用途，并且仅特别认可它用于警报等用途。创建/更新页面是否可以接受 v-dialog 的使用，还是将用户完全带到一个单独的页面，然后在创建或更新完成后返回？
2. 该模型在 v-card 上显示“创建”和“更新”页面，尽管它看起来很像一个表单。在这种情况下，是否有任何理由更喜欢 v-card 而不是 v-form，反之亦然？ （我都试过了，但是 v-form 有一个严重的缺点：表单是透明的，我不知道是什么让它变得透明或如何让它再次变得不透明，因为没有任何道具似乎与它有任何关系. 我不确定 v-form 是否不可避免地是透明的，因此不应该在 v-dialog 中使用，或者是否有一些简单的设置可以使它在 v-dialog 中完美使用。）

Answer 1

首先回答你的第二个问题：`v-card` 只是一个视觉组件，它可以更容易地创建框（卡片）来显示一些带有标题等的项目。另一方面，`v-form` 转换为`form `html 中的标签。您可以使用带有或不带有“表单”的“输入”，但使用它有其自身的好处，但您可以将其省略。
对于第一个问题：有很多比 `v-dialog` 更好的编辑或更新 `v-data-table` 的方法，你可以而且应该几乎总是避免将它用于该建议。最常见和更好的方法之一是使用 `v-alert` 和 `value` 和 `transition` 像 this ，但是如果你想从你的 `v-data-table` 更新一行，我建议使用您自己的具有 `v-text-field` 的模板，而不是 `td` `v-if` 中的简单 `div`，它与每个可以通过按钮切换的对象上的布尔值相关联。它会是这样的：

模板：

<v-data-table
  :headers="headers"
  :items="items"
>
  <template v-slot:item.myEditableCol="{ item  }" v-if="item.beingEdited">
     <v-text-field v-model="item.myEditableCol" />
  </template>
  <template v-slot:item.action="{ item  }">
     <v-icon
       class="mx-1"
       @click.stop="item.beingEdited = !item.beingEdited"
     >
    {{item.beingEdited?'mdi-check':'mdi-circle-edit-outline'}}
    </v-icon>
  </template>                    
</v-data-table>

和脚本：

headers: [
      {
        text: "ID",
        align: "start",
        value: "id",
      },
      {
        text: "Title",
        align: "start",
        value: "title",
      },
      {
        text: "Editable",
        align: "start",
        value: "myEditableCol",
      },
      {
        text: "CRUD",
        align: "start",
        value: "actions",
      },
    ],

items: [
      {
        id: 1,
        title: "row1",
        myEditableCol: "someValue1",
        beingEdited: false,
      },
      {
        id: 2,
        title: "row2",
        myEditableCol: "someValue2",
        beingEdited: false,
      },
      {
        id: 3,
        title: "row3",
        myEditableCol: "someValue3",
        beingEdited: false,
      },

    ],

您基本上可以在 vuetify 中使用 `templates` 和 `v-slot` 获得超级创意。
希望它可以帮助。