时间戳

首页 > 解决方案 > Vuetify 中的 v-form 和 v-card 有什么区别？

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

问题描述

我只是在学习 Vuetify，并打算用它在 Laravel 中构建有吸引力的 Vue 组件。（我也是 Laravel 和 Vue 的新手。）我正在尝试构建一个 CRUD 并使用文档中 v-table 页面末尾描述的 Vuetify v-table 。通过模仿这个模型，一些问题已经暴露出来。

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

标签： user-interfacevuetify.js

解决方案


首先回答你的第二个问题：`v-card` 只是一个视觉组件，它可以更容易地创建框（卡片）来显示一些带有标题等的项目。另一方面，`v-form` 转换为`form `html 中的标签。您可以使用带有或不带有“表单”的“输入”，但使用它有其自身的好处，但您可以将其省略。
对于第一个问题：有很多比 `v-dialog` 更好的编辑或更新 `v-data-table` 的方法，你可以而且应该几乎总是避免将它用于该建议。最常见和更好的方法之一是使用 `v-alert` 和 `value` 和 `transition` 像这样，但是如果你想从你的`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` 获得超级创意。
希望它可以帮助。

推荐阅读