Styjun

How do the Martian rebels defeat Earth when they're grossly outnumbered and outgunned?

How I loop over this code

Can a Scourge Aasimar fly?

CO₂ level is high enough that it reduces cognitive ability. Isn't that a reason to worry?

Why are Democrats mostly focused on increasing healthcare spending, rarely mentioning any proposals for decreasing the costs of healthcare services?

How to use FDE without needing to share the encryption password

Is there any point in having more than 6 months' runway in savings?

"Chess is 90% tactics" - should a player focus more on tactics in order to improve?

A timer to track time spent practicing Python

Dicht antonym - what is it?

What to do with a bent but not broken aluminum seat stay

Basic Accidental Question

On a naked chicken (no coating,batter) is there any benefit of double frying?

Why is SHA-384 more secure than SHA-512?

Creating vector (with lines/polygons) from raster based on paper map in QGIS

Iodine tablet correct use and efficiency

Why are circuit results different from theorised?

In layman terms: Why can't Quantum Entanglement be used to achieve FTL Communication?

Total I/O cost of a process

At what point in time would humans notice a 21st century satellite observing them?

What are these criss-cross patterns close to Cambridge Airport (UK)?

Can we rotate symbols in LaTeX? How should we make this diagram?

Was there a clearly identifiable "first computer" to use or demonstrate the use of virtual memory?

Is this a pure function?

Changing color of a toolbar dynamically in Vuetify

Change an HTML5 input's placeholder color with CSSCSS opacity only to background color, not the text on it?Changing the color of an hr elementWhy does HTML think “chucknorris” is a color?Change navbar color in Twitter BootstrapLaravel 5.4 + Vue.js 2.0 how to wrap js components into laravel appVuejs Vuetify color theme not workingVuetify align toolbarHow to set up toolbar to be fixed in vuetify?Vue/Vuetify - Unknown custom element: did you register the component correctly?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty
margin-bottom:0;

0

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'
)

css vue.js data-binding vuejs2 vuetify.js

share|improve this question

edited Mar 28 at 22:26

tony19

32.5k55 gold badges5757 silver badges9696 bronze badges

asked Mar 28 at 21:59

seyetseyet

721313 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  did you try backgroundColor?
  
  – Perogy
  Mar 28 at 22:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @seyet may I ask what causes the color to change?
  
  – DjSh
  Mar 29 at 13:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Perogy yes, it didn't work. However tony19 has given me a working solution
  
  – seyet
  Mar 29 at 14:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @DjSh I was experimenting by manually changing the 'dynamic' value but I want to change it by clicking a button in the future. thanks anyways :)
  
  – seyet
  Mar 29 at 14:26
  

  
  
  
  

add a comment
 | 

0

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'
)

css vue.js data-binding vuejs2 vuetify.js

share|improve this question

edited Mar 28 at 22:26

tony19

32.5k55 gold badges5757 silver badges9696 bronze badges

asked Mar 28 at 21:59

seyetseyet

721313 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  did you try backgroundColor?
  
  – Perogy
  Mar 28 at 22:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @seyet may I ask what causes the color to change?
  
  – DjSh
  Mar 29 at 13:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Perogy yes, it didn't work. However tony19 has given me a working solution
  
  – seyet
  Mar 29 at 14:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @DjSh I was experimenting by manually changing the 'dynamic' value but I want to change it by clicking a button in the future. thanks anyways :)
  
  – seyet
  Mar 29 at 14:26
  

  
  
  
  

add a comment
 | 

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'
)

css vue.js data-binding vuejs2 vuetify.js

share|improve this question

edited Mar 28 at 22:26

tony19

32.5k55 gold badges5757 silver badges9696 bronze badges

asked Mar 28 at 21:59

seyetseyet

721313 bronze badges

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

...

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

share|improve this question

edited Mar 28 at 22:26

tony19

32.5k55 gold badges5757 silver badges9696 bronze badges

asked Mar 28 at 21:59

seyetseyet

721313 bronze badges

share|improve this question

edited Mar 28 at 22:26

tony19

32.5k55 gold badges5757 silver badges9696 bronze badges

asked Mar 28 at 21:59

seyetseyet

721313 bronze badges

edited Mar 28 at 22:26

tony19

32.5k55 gold badges5757 silver badges9696 bronze badges

edited Mar 28 at 22:26

tony19

32.5k55 gold badges5757 silver badges9696 bronze badges

asked Mar 28 at 21:59

seyetseyet

721313 bronze badges

asked Mar 28 at 21:59

seyetseyet

721313 bronze badges

1 Answer
1

active

oldest

votes

1

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/vue@2.6.10"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/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>

share|improve this answer

answered Mar 28 at 22:23

tony19tony19

32.5k55 gold badges5757 silver badges9696 bronze badges

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55407486%2fchanging-color-of-a-toolbar-dynamically-in-vuetify%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

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/vue@2.6.10"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/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>

share|improve this answer

answered Mar 28 at 22:23

tony19tony19

32.5k55 gold badges5757 silver badges9696 bronze badges

add a comment
 | 

1

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/vue@2.6.10"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/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>

share|improve this answer

answered Mar 28 at 22:23

tony19tony19

32.5k55 gold badges5757 silver badges9696 bronze badges

add a comment
 | 

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/vue@2.6.10"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/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>

share|improve this answer

answered Mar 28 at 22:23

tony19tony19

32.5k55 gold badges5757 silver badges9696 bronze badges

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

new Vue(
 el: '#app',
 data: () => (
 dynamic: 'black'
 )
)

<script src="https://unpkg.com/vue@2.6.10"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/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>

new Vue(
 el: '#app',
 data: () => (
 dynamic: 'black'
 )
)

<script src="https://unpkg.com/vue@2.6.10"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/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>

new Vue(
 el: '#app',
 data: () => (
 dynamic: 'black'
 )
)

<script src="https://unpkg.com/vue@2.6.10"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/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>

share|improve this answer

answered Mar 28 at 22:23

tony19tony19

32.5k55 gold badges5757 silver badges9696 bronze badges

answered Mar 28 at 22:23

tony19tony19

32.5k55 gold badges5757 silver badges9696 bronze badges

answered Mar 28 at 22:23

tony19tony19

32.5k55 gold badges5757 silver badges9696 bronze badges