Vue Directive that creates a component and appends to parent
0
How can i create a directive that appends another vue component to the element with the directive
For example:
<div :informable="myModel">
<span>Some html</span>
</div>
would add an icon with information using the given model
Update:
To be more clear on what i want to do
<div :informable="myModel">
<span>Some html</span>
</div>
would result to this:
<div>
<span>Some html</span>
<i>This is the information given from myModel</i>
</div>
vue.js vuejs2
asked Dec 31 '18 at 9:52
WalksAwayWalksAway
1,829822
add a comment |
0
How can i create a directive that appends another vue component to the element with the directive
For example:
<div :informable="myModel">
<span>Some html</span>
</div>
would add an icon with information using the given model
Update:
To be more clear on what i want to do
<div :informable="myModel">
<span>Some html</span>
</div>
would result to this:
<div>
<span>Some html</span>
<i>This is the information given from myModel</i>
</div>
vue.js vuejs2
asked Dec 31 '18 at 9:52
WalksAwayWalksAway
1,829822
1
It isn't clear what you want here. Maybe you can clarify with a more detailed example.
– Husam Ibrahim
Dec 31 '18 at 10:04
please explain your use case, maybe i could give a better idea since what you want is not enough clear
– Boussadjra Brahim
Dec 31 '18 at 13:01
I have many many places in my application that i need to add an icon with a tooltip to the end of my element, my tooltip is a component that has some functionality, and i want it show up only when the user hovers its parent element
– WalksAway
Dec 31 '18 at 15:49
add a comment |
0
0
0
How can i create a directive that appends another vue component to the element with the directive
For example:
<div :informable="myModel">
<span>Some html</span>
</div>
would add an icon with information using the given model
Update:
To be more clear on what i want to do
<div :informable="myModel">
<span>Some html</span>
</div>
would result to this:
<div>
<span>Some html</span>
<i>This is the information given from myModel</i>
</div>
vue.js vuejs2
asked Dec 31 '18 at 9:52
WalksAwayWalksAway
1,829822
How can i create a directive that appends another vue component to the element with the directive
For example:
<div :informable="myModel">
<span>Some html</span>
</div>
would add an icon with information using the given model
Update:
To be more clear on what i want to do
<div :informable="myModel">
<span>Some html</span>
</div>
would result to this:
<div>
<span>Some html</span>
<i>This is the information given from myModel</i>
</div>
vue.js vuejs2
vue.js vuejs2
asked Dec 31 '18 at 9:52
WalksAwayWalksAway
1,829822
asked Dec 31 '18 at 9:52
WalksAwayWalksAway
1,829822
edited Dec 31 '18 at 11:03
WalksAway
asked Dec 31 '18 at 9:52
WalksAwayWalksAway
1,829822
asked Dec 31 '18 at 9:52
WalksAwayWalksAway
1,829822
asked Dec 31 '18 at 9:52
WalksAwayWalksAway
1,829822
1,829822
1
It isn't clear what you want here. Maybe you can clarify with a more detailed example.
– Husam Ibrahim
Dec 31 '18 at 10:04
please explain your use case, maybe i could give a better idea since what you want is not enough clear
– Boussadjra Brahim
Dec 31 '18 at 13:01
I have many many places in my application that i need to add an icon with a tooltip to the end of my element, my tooltip is a component that has some functionality, and i want it show up only when the user hovers its parent element
– WalksAway
Dec 31 '18 at 15:49
add a comment |
1
It isn't clear what you want here. Maybe you can clarify with a more detailed example.
– Husam Ibrahim
Dec 31 '18 at 10:04
please explain your use case, maybe i could give a better idea since what you want is not enough clear
– Boussadjra Brahim
Dec 31 '18 at 13:01
I have many many places in my application that i need to add an icon with a tooltip to the end of my element, my tooltip is a component that has some functionality, and i want it show up only when the user hovers its parent element
– WalksAway
Dec 31 '18 at 15:49
1
1
It isn't clear what you want here. Maybe you can clarify with a more detailed example.
– Husam Ibrahim
Dec 31 '18 at 10:04
It isn't clear what you want here. Maybe you can clarify with a more detailed example.
– Husam Ibrahim
Dec 31 '18 at 10:04
please explain your use case, maybe i could give a better idea since what you want is not enough clear
– Boussadjra Brahim
Dec 31 '18 at 13:01
please explain your use case, maybe i could give a better idea since what you want is not enough clear
– Boussadjra Brahim
Dec 31 '18 at 13:01
I have many many places in my application that i need to add an icon with a tooltip to the end of my element, my tooltip is a component that has some functionality, and i want it show up only when the user hovers its parent element
– WalksAway
Dec 31 '18 at 15:49
I have many many places in my application that i need to add an icon with a tooltip to the end of my element, my tooltip is a component that has some functionality, and i want it show up only when the user hovers its parent element
– WalksAway
Dec 31 '18 at 15:49
add a comment |
0
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
});
}
});
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%2f53986016%2fvue-directive-that-creates-a-component-and-appends-to-parent%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53986016%2fvue-directive-that-creates-a-component-and-appends-to-parent%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
1
It isn't clear what you want here. Maybe you can clarify with a more detailed example.
– Husam Ibrahim
Dec 31 '18 at 10:04
please explain your use case, maybe i could give a better idea since what you want is not enough clear
– Boussadjra Brahim
Dec 31 '18 at 13:01
I have many many places in my application that i need to add an icon with a tooltip to the end of my element, my tooltip is a component that has some functionality, and i want it show up only when the user hovers its parent element
– WalksAway
Dec 31 '18 at 15:49