CODEWITHSUNDEEP
cssvue.jsdata-bindingvuejs2vuetify.js
seyet
seyet

Reputation: 1150

Changing color of a toolbar dynamically in Vuetify

I want to change the color of my toolbar dynamically in Vuetify (Please note I know there are similar posts on this website but none of them use Vue)

I used v-bind:style to do so, but it doesn't work! This is my template and its respective script:

<v-toolbar
  flat
  fixed
  app
  v-bind:style="{ color: dynamic }"
  light
  scroll-off-screen
>

...

data: () => ({
 dynamic: 'black'
})

Upvotes: 1

Views: 10335

Answers (1)

tony19
tony19

Reputation: 138526

The v-toolbar has a color property that controls its background color. You could bind dynamic to that property instead of a style binding:

<v-toolbar :color="dynamic" ...>


new Vue({
  el: '#app',
  data: () => ({
    dynamic: 'black'
  })
})
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">

<div id="app">
  <v-app id="inspire">
    <v-toolbar dark :color="dynamic">
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title>Title</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn flat>Link One</v-btn>
        <v-btn flat>Link Two</v-btn>
        <v-btn flat>Link Three</v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </v-app>
</div>

Upvotes: 6

Related Questions