Vuejs - change sub element's img source when parent has “active” class
<router-link to="/">
<div class="menu-item">
<div class="menu-item-image"><img
src="data:image/png;base64,iVBORw0KGg"
alt=""></div>
<a class="menu-item-text-selected">Dashboard</a>
</div>
</router-link>
Have code like above.
When a link clicked router-link adds router-link-exact-active class to parent but i need to change the src of the sub image. Any suggestion? I can bind a method to click and perform required action but that does not seem right. Any elegant solution is appreciated.
Thanks
vue.js vue-router
edited Nov 12 at 17:16
Husam Ibrahim
2,613315
asked Nov 12 at 16:38
serkan
2,99012133
add a comment |
<router-link to="/">
<div class="menu-item">
<div class="menu-item-image"><img
src="data:image/png;base64,iVBORw0KGg"
alt=""></div>
<a class="menu-item-text-selected">Dashboard</a>
</div>
</router-link>
Have code like above.
When a link clicked router-link adds router-link-exact-active class to parent but i need to change the src of the sub image. Any suggestion? I can bind a method to click and perform required action but that does not seem right. Any elegant solution is appreciated.
Thanks
vue.js vue-router
edited Nov 12 at 17:16
Husam Ibrahim
2,613315
asked Nov 12 at 16:38
serkan
2,99012133
You could use CSS, instead of using an image go for a background image. Define a background image for the normal state.menu-item-image { background: url(imgSrc) }then for the active state.router-link-exact-active .menu-item-image { background: url(activeImgSrc) }
– Ricky
Nov 12 at 17:11
@Ricky That would require multiple classes then.
– serkan
Nov 12 at 17:24
add a comment |
<router-link to="/">
<div class="menu-item">
<div class="menu-item-image"><img
src="data:image/png;base64,iVBORw0KGg"
alt=""></div>
<a class="menu-item-text-selected">Dashboard</a>
</div>
</router-link>
Have code like above.
When a link clicked router-link adds router-link-exact-active class to parent but i need to change the src of the sub image. Any suggestion? I can bind a method to click and perform required action but that does not seem right. Any elegant solution is appreciated.
Thanks
vue.js vue-router
edited Nov 12 at 17:16
Husam Ibrahim
2,613315
asked Nov 12 at 16:38
serkan
2,99012133
<router-link to="/">
<div class="menu-item">
<div class="menu-item-image"><img
src="data:image/png;base64,iVBORw0KGg"
alt=""></div>
<a class="menu-item-text-selected">Dashboard</a>
</div>
</router-link>
Have code like above.
When a link clicked router-link adds router-link-exact-active class to parent but i need to change the src of the sub image. Any suggestion? I can bind a method to click and perform required action but that does not seem right. Any elegant solution is appreciated.
Thanks
vue.js vue-router
vue.js vue-router
edited Nov 12 at 17:16
Husam Ibrahim
2,613315
asked Nov 12 at 16:38
serkan
2,99012133
edited Nov 12 at 17:16
Husam Ibrahim
2,613315
asked Nov 12 at 16:38
serkan
2,99012133
edited Nov 12 at 17:16
Husam Ibrahim
2,613315
edited Nov 12 at 17:16
Husam Ibrahim
2,613315
edited Nov 12 at 17:16
Husam Ibrahim
2,613315
2,613315
asked Nov 12 at 16:38
serkan
2,99012133
asked Nov 12 at 16:38
serkan
2,99012133
asked Nov 12 at 16:38
serkan
2,99012133
2,99012133
You could use CSS, instead of using an image go for a background image. Define a background image for the normal state.menu-item-image { background: url(imgSrc) }then for the active state.router-link-exact-active .menu-item-image { background: url(activeImgSrc) }
– Ricky
Nov 12 at 17:11
@Ricky That would require multiple classes then.
– serkan
Nov 12 at 17:24
add a comment |
You could use CSS, instead of using an image go for a background image. Define a background image for the normal state.menu-item-image { background: url(imgSrc) }then for the active state.router-link-exact-active .menu-item-image { background: url(activeImgSrc) }
– Ricky
Nov 12 at 17:11
@Ricky That would require multiple classes then.
– serkan
Nov 12 at 17:24
You could use CSS, instead of using an image go for a background image. Define a background image for the normal state
.menu-item-image { background: url(imgSrc) } then for the active state .router-link-exact-active .menu-item-image { background: url(activeImgSrc) }– Ricky
Nov 12 at 17:11
You could use CSS, instead of using an image go for a background image. Define a background image for the normal state
.menu-item-image { background: url(imgSrc) } then for the active state .router-link-exact-active .menu-item-image { background: url(activeImgSrc) }– Ricky
Nov 12 at 17:11
@Ricky That would require multiple classes then.
– serkan
Nov 12 at 17:24
@Ricky That would require multiple classes then.
– serkan
Nov 12 at 17:24
add a comment |
active
oldest
votes
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
});
}
});
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%2f53266473%2fvuejs-change-sub-elements-img-source-when-parent-has-active-class%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53266473%2fvuejs-change-sub-elements-img-source-when-parent-has-active-class%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
You could use CSS, instead of using an image go for a background image. Define a background image for the normal state
.menu-item-image { background: url(imgSrc) }then for the active state.router-link-exact-active .menu-item-image { background: url(activeImgSrc) }– Ricky
Nov 12 at 17:11
@Ricky That would require multiple classes then.
– serkan
Nov 12 at 17:24