Changing color of a toolbar dynamically in VuetifyChange 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?
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;
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
edited Mar 28 at 22:26
tony19
32.5k5 gold badges57 silver badges96 bronze badges
asked Mar 28 at 21:59
seyetseyet
7213 bronze badges
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
edited Mar 28 at 22:26
tony19
32.5k5 gold badges57 silver badges96 bronze badges
asked Mar 28 at 21:59
seyetseyet
7213 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
edited Mar 28 at 22:26
tony19
32.5k5 gold badges57 silver badges96 bronze badges
asked Mar 28 at 21:59
seyetseyet
7213 bronze badges
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
css vue.js data-binding vuejs2 vuetify.js
edited Mar 28 at 22:26
tony19
32.5k5 gold badges57 silver badges96 bronze badges
asked Mar 28 at 21:59
seyetseyet
7213 bronze badges
edited Mar 28 at 22:26
tony19
32.5k5 gold badges57 silver badges96 bronze badges
asked Mar 28 at 21:59
seyetseyet
7213 bronze badges
edited Mar 28 at 22:26
tony19
32.5k5 gold badges57 silver badges96 bronze badges
edited Mar 28 at 22:26
tony19
32.5k5 gold badges57 silver badges96 bronze badges
edited Mar 28 at 22:26
tony19
32.5k5 gold badges57 silver badges96 bronze badges
32.5k5 gold badges57 silver badges96 bronze badges
asked Mar 28 at 21:59
seyetseyet
7213 bronze badges
asked Mar 28 at 21:59
seyetseyet
7213 bronze badges
asked Mar 28 at 21:59
seyetseyet
7213 bronze badges
7213 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
|
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
did you try backgroundColor?
– Perogy
Mar 28 at 22:14
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
@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
@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
@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
|
1 Answer
1
active
oldest
votes
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>answered Mar 28 at 22:23
tony19tony19
32.5k5 gold badges57 silver badges96 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
);
);
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
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Mar 28 at 22:23
tony19tony19
32.5k5 gold badges57 silver badges96 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>answered Mar 28 at 22:23
tony19tony19
32.5k5 gold badges57 silver badges96 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>answered Mar 28 at 22:23
tony19tony19
32.5k5 gold badges57 silver badges96 bronze badges
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>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>answered Mar 28 at 22:23
tony19tony19
32.5k5 gold badges57 silver badges96 bronze badges
answered Mar 28 at 22:23
tony19tony19
32.5k5 gold badges57 silver badges96 bronze badges
answered Mar 28 at 22:23
tony19tony19
32.5k5 gold badges57 silver badges96 bronze badges
answered Mar 28 at 22:23
tony19tony19
32.5k5 gold badges57 silver badges96 bronze badges
32.5k5 gold badges57 silver badges96 bronze badges
add a comment
|
add a comment
|
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
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
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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