CODEWITHSUNDEEP
vue.jsmaterial-designvuetify.js
The Condor
The Condor

Reputation: 1054

Dynamically add back arrow on Vuetify's v-toolbar component

I am working on a project, and in some views I would need to add the back arrow to go back to the previous vue-router view.

So far, I have created a separate component for the toolbar and I load it in the main App component, because all the screens will have that layout.

I tried now to load the toolbar component in each view, passing a prop to establish if the arrow should be there or not and visualizing it with v-if like this:

Toolbar template

<template>
  <v-toolbar color="amber" app>
    <v-btn v-if="backArrow" icon class="hidden-xs-only">
      <v-icon>arrow_back</v-icon>
    </v-btn>
    <v-toolbar-title>Babbelbord</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn icon to="/">
      <v-icon>home</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>settings</v-icon>
    </v-btn>
  </v-toolbar>
</template>

Passing the prop to visualize the arrow

<template>
  <div>
    <page-header backArrow="true"></page-header>
    ....
  </div>
</template>

This actually works, however given the limitation that all template's code must be within a unique container element, my toolbar now doesn't cover the whole lenght of the screen anymore.

Any other suggested approach for this issue?

Upvotes: 4

Views: 6756

Answers (1)

wwerner
wwerner

Reputation: 4327

I'd suggest you wrap the whole application in a v-app component as described in https://vuetifyjs.com/en/layout/pre-defined. This would take care of the toolbar size.

The component tree would look like this:

  • v-app
    • page-header
      • v-toolbar
        • back arrow
        • ...
    • v-content
      • ...

Have a look at https://codepen.io/anon/pen/oEaMRr for a working example using an inline template for your page-header

Upvotes: 2

Related Questions