Блог

Я использую Vue 2, я использую Vuetify 2.2.11. У меня есть два текста, которые я хотел бы поместить внутри v-app-bar, один должен быть слева, а другой справа. Как мне этого добиться?

Мой текущий код:

 <template>
  <v-app>
    <v-navigation-drawer app permanent color="#048ccc" clipped>
        <!-- Removed to simplify -->
    </v-navigation-drawer>

    <v-app-bar app clipped-left color="#005f9b" hide-on-scroll>
      LeftText-
      <div style="text-align:right">RightText</div>
    </v-app-bar>

    <div>
      <v-main>
        <div style="margin:1em">
          <router-view :key="$route.fullPath"></router-view>
        </div>
      </v-main>
    </div>
  </v-app>
</template>
 

Чего я хочу достичь:

Как мне это сделать?

Вы могли бы просто добавить v-spacer между ними

    <v-app-bar app clipped-left color="#005f9b" hide-on-scroll>
      LeftText-
      <v-spacer />
      <div style="text-align:right">RightText</div>
    </v-app-bar