Vuetify - 将列表中的项目一直向下移动答案

【问题标题】：Vuetify - Moving item in list all the way downVuetify - 将列表中的项目一直向下移动
【发布时间】：2021-03-27 17:03:10
【问题描述】：

为大家准备的快速 Vuetify 问题！我需要将社交媒体图标移动到此导航抽屉的底部。

这样做有点困难。谁能给我一些指示？代码贴在下面。另请注意，我想要一个 Vuetify 答案，就像使用 Vuetify 类/道具来完成这项工作（最好没有 CSS）。

注意：下面的代码包含在 v-navigation-drawer> 标记内（如果有区别的话）。

谢谢！

编辑：由于某种原因，代码不是格式化属性。

<template>
  <v-list>
    <v-list-item two-line>
      <v-list-item-content class="pb-5 text-center">
        <v-list-item-title class="orange--text display-2">{{
          username
        }}</v-list-item-title>
        <v-list-item-subtitle class="text-h6 font-weight-light white--text">{{
          expertOf
        }}</v-list-item-subtitle>
      </v-list-item-content>
    </v-list-item>
    <NuxtLink
      v-for="(component, index) in components.filter(
        (component) => component.name != 'Name'
      )"
      :key="index"
      :to="path === '/' ? `#${component.name}` : '/'"
    >
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title
            ><v-btn
              block
              depressed
              class="text-capitalize font-weight-light grey darken-4"
              >{{ component.name }}</v-btn
            ></v-list-item-title
          >
        </v-list-item-content>
      </v-list-item>
    </NuxtLink>
    <NuxtLink to="/blog">
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title
            ><v-btn
              block
              depressed
              class="text-capitalize font-weight-light grey darken-4"
              >Blog</v-btn
            ></v-list-item-title
          >
        </v-list-item-content>
      </v-list-item>
    </NuxtLink>

    <v-list-item class="mb-2">
      <v-list-item-content>
        <SocialMedia />
      </v-list-item-content>
    </v-list-item>
  </v-list>
</template>

【问题讨论】：

CSS position: fixed|absolute; bottom: 1.5em
@xandercoded 我想要一个 Vuetify 的答案。我已经完成了 CSS 的东西。
我想知道使用 flex helpers 特别是 flex-column 类和 v-spacer 是否会有所帮助
说你想要一个 Vuetify 的答案，而不是 "CSS stuff" 是说你不想学习/理解它是如何工作的，你只想知道用什么按钮按。最终，Vuetify 是一个静态和动态应用 CSS 的工具。它并不涵盖所有情况，仅涵盖常见情况。有人可能会争辩说 CSS 几乎没有涵盖所有情况。
@tao 我已经使用 CSS 完成了。我想要一个 Vuetify 的答案。这就是我发布这个问题的原因。我正在尝试了解 Vuetify 的工作原理。

标签： javascript css vue.js vuetify.js

【解决方案1】：

最终得到了我需要的东西：

我没有使用任何 CSS，但确实需要添加一个帮助 div 以便我对内容进行分组。

代码如下：

<template>
  <v-list class="d-flex flex-column justify-space-between fill-height">
    <div>
      <v-list-item two-line>
        <v-list-item-content class="pb-5 text-center">
          <v-list-item-title class="orange--text display-2">{{
            username
          }}</v-list-item-title>
          <v-list-item-subtitle class="text-h6 font-weight-light white--text">{{
            expertOf
          }}</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
      <NuxtLink
        v-for="(component, index) in components.filter(
          (component) => component.name != 'Name'
        )"
        :key="index"
        :to="{ path: '/', hash: '#' + component.name }"
      >
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title
              ><v-btn
                block
                depressed
                class="text-capitalize font-weight-light grey darken-4"
                >{{ component.name }}</v-btn
              ></v-list-item-title
            >
          </v-list-item-content>
        </v-list-item>
      </NuxtLink>
      <NuxtLink to="/blog">
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title
              ><v-btn
                block
                depressed
                class="text-capitalize font-weight-light grey darken-4"
                >Blog</v-btn
              ></v-list-item-title
            >
          </v-list-item-content>
        </v-list-item>
      </NuxtLink>
    </div>
    <v-list-item>
      <v-list-item-content class="mt-auto">
        <SocialMedia />
      </v-list-item-content>
    </v-list-item>
  </v-list>
</template>

【讨论】：

将 mt-auto 添加到包含链接的 v-list-item 或将 mb-auto 添加到前一个也可能有效。