Vue- How to change style of a same element in different components
1
I am trying to change the style of a specific div from one component to another. Each component is appended to the template in the App component and replaces the <router-view></router-view> tags. The div #app needs to have a padding of 172px in the Hello.vue component, and 0px on the rest of the components.Is this possible, and how can I accomplish this?
App.vue
<template>
<div id="app">
<div>
<img src="./assets/logo.png" align="center">
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
background-color: hsla(275, 97%, 50%, 0.57);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 0px;
height: inherit;
}
body{
height: inherit;
}
html{
height: 100%;
}
</style>
Hello.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<ul>
<li><h2><router-link to="/app/login">Login</router-link></h2></li>
<li><h2><router-link to="/app/about">About Us</router-link></h2></li>
</ul>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Vue'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#app{
padding-top: 172px; /*This does not work*/
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #000000;
}
</style>
html css vue.js
asked Nov 15 '18 at 17:49
Noam SuissaNoam Suissa
236
add a comment |
1
I am trying to change the style of a specific div from one component to another. Each component is appended to the template in the App component and replaces the <router-view></router-view> tags. The div #app needs to have a padding of 172px in the Hello.vue component, and 0px on the rest of the components.Is this possible, and how can I accomplish this?
App.vue
<template>
<div id="app">
<div>
<img src="./assets/logo.png" align="center">
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
background-color: hsla(275, 97%, 50%, 0.57);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 0px;
height: inherit;
}
body{
height: inherit;
}
html{
height: 100%;
}
</style>
Hello.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<ul>
<li><h2><router-link to="/app/login">Login</router-link></h2></li>
<li><h2><router-link to="/app/about">About Us</router-link></h2></li>
</ul>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Vue'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#app{
padding-top: 172px; /*This does not work*/
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #000000;
}
</style>
html css vue.js
asked Nov 15 '18 at 17:49
Noam SuissaNoam Suissa
236
If it appears twice, it should not have the sameid.
– Roy J
Nov 15 '18 at 18:14
@RoyJ Please read carefully, there is only one instance of the idapp. A template in a component gets injected into the App.vue template.
– Noam Suissa
Nov 15 '18 at 18:27
add a comment |
1
1
1
I am trying to change the style of a specific div from one component to another. Each component is appended to the template in the App component and replaces the <router-view></router-view> tags. The div #app needs to have a padding of 172px in the Hello.vue component, and 0px on the rest of the components.Is this possible, and how can I accomplish this?
App.vue
<template>
<div id="app">
<div>
<img src="./assets/logo.png" align="center">
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
background-color: hsla(275, 97%, 50%, 0.57);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 0px;
height: inherit;
}
body{
height: inherit;
}
html{
height: 100%;
}
</style>
Hello.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<ul>
<li><h2><router-link to="/app/login">Login</router-link></h2></li>
<li><h2><router-link to="/app/about">About Us</router-link></h2></li>
</ul>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Vue'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#app{
padding-top: 172px; /*This does not work*/
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #000000;
}
</style>
html css vue.js
asked Nov 15 '18 at 17:49
Noam SuissaNoam Suissa
236
I am trying to change the style of a specific div from one component to another. Each component is appended to the template in the App component and replaces the <router-view></router-view> tags. The div #app needs to have a padding of 172px in the Hello.vue component, and 0px on the rest of the components.Is this possible, and how can I accomplish this?
App.vue
<template>
<div id="app">
<div>
<img src="./assets/logo.png" align="center">
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
background-color: hsla(275, 97%, 50%, 0.57);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 0px;
height: inherit;
}
body{
height: inherit;
}
html{
height: 100%;
}
</style>
Hello.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<ul>
<li><h2><router-link to="/app/login">Login</router-link></h2></li>
<li><h2><router-link to="/app/about">About Us</router-link></h2></li>
</ul>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Vue'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#app{
padding-top: 172px; /*This does not work*/
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #000000;
}
</style>
html css vue.js
html css vue.js
asked Nov 15 '18 at 17:49
Noam SuissaNoam Suissa
236
asked Nov 15 '18 at 17:49
Noam SuissaNoam Suissa
236
asked Nov 15 '18 at 17:49
Noam SuissaNoam Suissa
236
asked Nov 15 '18 at 17:49
Noam SuissaNoam Suissa
236
asked Nov 15 '18 at 17:49
Noam SuissaNoam Suissa
236
236
If it appears twice, it should not have the sameid.
– Roy J
Nov 15 '18 at 18:14
@RoyJ Please read carefully, there is only one instance of the idapp. A template in a component gets injected into the App.vue template.
– Noam Suissa
Nov 15 '18 at 18:27
add a comment |
If it appears twice, it should not have the sameid.
– Roy J
Nov 15 '18 at 18:14
@RoyJ Please read carefully, there is only one instance of the idapp. A template in a component gets injected into the App.vue template.
– Noam Suissa
Nov 15 '18 at 18:27
If it appears twice, it should not have the same
id.– Roy J
Nov 15 '18 at 18:14
If it appears twice, it should not have the same
id.– Roy J
Nov 15 '18 at 18:14
@RoyJ Please read carefully, there is only one instance of the id
app. A template in a component gets injected into the App.vue template.– Noam Suissa
Nov 15 '18 at 18:27
@RoyJ Please read carefully, there is only one instance of the id
app. A template in a component gets injected into the App.vue template.– Noam Suissa
Nov 15 '18 at 18:27
add a comment |
1 Answer
1
active
oldest
votes
2
There is a quick way to do this (not sure if it's best practice) by checking the route path; assume Hello.vue is rendered via the path /hello:
<div id="app" :style="{ padding: $route.path === '/hello' ? '172px' : '0px' }">
...
</div>
answered Nov 15 '18 at 18:33
PsidomPsidom
127k1292136
2
Works perfectly! Thanks! If you happen to find a way to implement this directly in css, please let me know.
– Noam Suissa
Nov 15 '18 at 18:41
how would I add this line as well?margin-left: ($route.path === ('/app/my-account' || '/app/fleet-overview' || '/app/rankings')?'10%':'')I can't seem to find a way to add it to your answer.
– Noam Suissa
Nov 18 '18 at 23:43
1
Trymargin-left: (['/app/my-account', '/app/fleet-overview', '/app/rankings'].includes($route.path) ? '10%':'')
– Psidom
Nov 19 '18 at 0:20
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/3.0/"u003ecc by-sa 3.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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53325246%2fvue-how-to-change-style-of-a-same-element-in-different-components%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
2
There is a quick way to do this (not sure if it's best practice) by checking the route path; assume Hello.vue is rendered via the path /hello:
<div id="app" :style="{ padding: $route.path === '/hello' ? '172px' : '0px' }">
...
</div>
answered Nov 15 '18 at 18:33
PsidomPsidom
127k1292136
2
Works perfectly! Thanks! If you happen to find a way to implement this directly in css, please let me know.
– Noam Suissa
Nov 15 '18 at 18:41
how would I add this line as well?margin-left: ($route.path === ('/app/my-account' || '/app/fleet-overview' || '/app/rankings')?'10%':'')I can't seem to find a way to add it to your answer.
– Noam Suissa
Nov 18 '18 at 23:43
1
Trymargin-left: (['/app/my-account', '/app/fleet-overview', '/app/rankings'].includes($route.path) ? '10%':'')
– Psidom
Nov 19 '18 at 0:20
add a comment |
2
There is a quick way to do this (not sure if it's best practice) by checking the route path; assume Hello.vue is rendered via the path /hello:
<div id="app" :style="{ padding: $route.path === '/hello' ? '172px' : '0px' }">
...
</div>
answered Nov 15 '18 at 18:33
PsidomPsidom
127k1292136
2
Works perfectly! Thanks! If you happen to find a way to implement this directly in css, please let me know.
– Noam Suissa
Nov 15 '18 at 18:41
how would I add this line as well?margin-left: ($route.path === ('/app/my-account' || '/app/fleet-overview' || '/app/rankings')?'10%':'')I can't seem to find a way to add it to your answer.
– Noam Suissa
Nov 18 '18 at 23:43
1
Trymargin-left: (['/app/my-account', '/app/fleet-overview', '/app/rankings'].includes($route.path) ? '10%':'')
– Psidom
Nov 19 '18 at 0:20
add a comment |
2
2
2
There is a quick way to do this (not sure if it's best practice) by checking the route path; assume Hello.vue is rendered via the path /hello:
<div id="app" :style="{ padding: $route.path === '/hello' ? '172px' : '0px' }">
...
</div>
answered Nov 15 '18 at 18:33
PsidomPsidom
127k1292136
There is a quick way to do this (not sure if it's best practice) by checking the route path; assume Hello.vue is rendered via the path /hello:
<div id="app" :style="{ padding: $route.path === '/hello' ? '172px' : '0px' }">
...
</div>
answered Nov 15 '18 at 18:33
PsidomPsidom
127k1292136
answered Nov 15 '18 at 18:33
PsidomPsidom
127k1292136
answered Nov 15 '18 at 18:33
PsidomPsidom
127k1292136
answered Nov 15 '18 at 18:33
PsidomPsidom
127k1292136
127k1292136
2
Works perfectly! Thanks! If you happen to find a way to implement this directly in css, please let me know.
– Noam Suissa
Nov 15 '18 at 18:41
how would I add this line as well?margin-left: ($route.path === ('/app/my-account' || '/app/fleet-overview' || '/app/rankings')?'10%':'')I can't seem to find a way to add it to your answer.
– Noam Suissa
Nov 18 '18 at 23:43
1
Trymargin-left: (['/app/my-account', '/app/fleet-overview', '/app/rankings'].includes($route.path) ? '10%':'')
– Psidom
Nov 19 '18 at 0:20
add a comment |
2
Works perfectly! Thanks! If you happen to find a way to implement this directly in css, please let me know.
– Noam Suissa
Nov 15 '18 at 18:41
how would I add this line as well?margin-left: ($route.path === ('/app/my-account' || '/app/fleet-overview' || '/app/rankings')?'10%':'')I can't seem to find a way to add it to your answer.
– Noam Suissa
Nov 18 '18 at 23:43
1
Trymargin-left: (['/app/my-account', '/app/fleet-overview', '/app/rankings'].includes($route.path) ? '10%':'')
– Psidom
Nov 19 '18 at 0:20
2
2
Works perfectly! Thanks! If you happen to find a way to implement this directly in css, please let me know.
– Noam Suissa
Nov 15 '18 at 18:41
Works perfectly! Thanks! If you happen to find a way to implement this directly in css, please let me know.
– Noam Suissa
Nov 15 '18 at 18:41
how would I add this line as well?
margin-left: ($route.path === ('/app/my-account' || '/app/fleet-overview' || '/app/rankings')?'10%':'') I can't seem to find a way to add it to your answer.– Noam Suissa
Nov 18 '18 at 23:43
how would I add this line as well?
margin-left: ($route.path === ('/app/my-account' || '/app/fleet-overview' || '/app/rankings')?'10%':'') I can't seem to find a way to add it to your answer.– Noam Suissa
Nov 18 '18 at 23:43
1
1
Try
margin-left: (['/app/my-account', '/app/fleet-overview', '/app/rankings'].includes($route.path) ? '10%':'')– Psidom
Nov 19 '18 at 0:20
Try
margin-left: (['/app/my-account', '/app/fleet-overview', '/app/rankings'].includes($route.path) ? '10%':'')– Psidom
Nov 19 '18 at 0:20
add a comment |
draft saved
draft discarded
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.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53325246%2fvue-how-to-change-style-of-a-same-element-in-different-components%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
If it appears twice, it should not have the same
id.– Roy J
Nov 15 '18 at 18:14
@RoyJ Please read carefully, there is only one instance of the id
app. A template in a component gets injected into the App.vue template.– Noam Suissa
Nov 15 '18 at 18:27