Vue - Proper way to modify slots before rendering - Goal: add transition group key programatically2019 Community Moderator ElectionImported Vue component only registered on Webpack hot reloadCannot get object’s property in state before render using Vue + VuexReact - How do I give each child component a unique ref?Vue.js not all transition group children are animatingIs there a way to 'pipe-together' slots in nested components in Vue?How to encapsulate / wrap a VueJS component?Does $destroy function removes the Vue Custom component from cacheVue: Why is this computed property not reactive?Correct way to pass props to all children through slot-scope in Vue.jsVue transition-group not working with slots?
Unreachable code, but reachable with exception
What is the blue range indicating on this manifold pressure gauge?
Why must traveling waves have the same amplitude to form a standing wave?
Time dilation for a moving electronic clock
Does Linux have system calls to access all the features of the file systems it supports?
What is the dot in “1.2.4."
When is a batch class instantiated when you schedule it?
Life insurance that covers only simultaneous/dual deaths
What does it mean when multiple 々 marks follow a 、?
Provisioning profile doesn't include the application-identifier and keychain-access-groups entitlements
My adviser wants to be the first author
Do items de-spawn in Diablo?
How to make readers know that my work has used a hidden constraint?
Is it ok to include an epilogue dedicated to colleagues who passed away in the end of the manuscript?
PTIJ: How can I halachically kill a vampire?
Why does Deadpool say "You're welcome, Canada," after shooting Ryan Reynolds in the end credits?
Identifying the interval from A♭ to D♯
Am I not good enough for you?
Latest web browser compatible with Windows 98
Is a lawful good "antagonist" effective?
How do anti-virus programs start at Windows boot?
How does Dispel Magic work against Stoneskin?
If Invisibility ends because the original caster casts a non-concentration spell, does Invisibility also end on other targets of the original casting?
My story is written in English, but is set in my home country. What language should I use for the dialogue?
Vue - Proper way to modify slots before rendering - Goal: add transition group key programatically
2019 Community Moderator ElectionImported Vue component only registered on Webpack hot reloadCannot get object’s property in state before render using Vue + VuexReact - How do I give each child component a unique ref?Vue.js not all transition group children are animatingIs there a way to 'pipe-together' slots in nested components in Vue?How to encapsulate / wrap a VueJS component?Does $destroy function removes the Vue Custom component from cacheVue: Why is this computed property not reactive?Correct way to pass props to all children through slot-scope in Vue.jsVue transition-group not working with slots?
I have a wrapper component that is just a <transition-group> component accepting content via its default slot. The content passed through the default slot is a series of secondary vue components.
Since items in a transition group need to be keyed, how would I go about adding the key to the slot items? As they are slotted and not rendered in a v-for loop, I think the keys would need to be added programmatically.
Below is a snippet to play with. You'll see my approach in the created() hook, which seems to work on initial page load/rendering, however when hot-reload refreshes in my dev environment, the keys are lost and the error about transition group children needing keys comes back.
Is there a better approach to accomplish this that would keep hot-reload happy? Perhaps I shouldn't worry about hot-reload since it's only a development feature, but my thinking is that if hot-reload is not liking my approach, then I may be doing it incorrectly and there is probably a better way.
Thoughts?
I'm also just curious in general about when in the lifecycle is the right time to make modifications to the slot nodes. And further, is the node.key the right place to apply the unique key? Which property in the slot node is the right property to edit? (i.e. there is also a 'key' set in the component data property, when the key is set in a v-for loop)
Thanks so much for any insight you can offer!
Vue.component('wrapper-component',
render(h)
return h('transition-group', this.$slots.default)
,
// my attempt at providing a unique key for transition children is in created() hook below
// this works on itital page load/rendering - but breaks when hot-reload refreshes my development site
// uncomment created() hook to see my approach in action - works here on page reload, but does not hold up with hot-reload (i.e. once hot-reload refreshes, the transition items no longer have their unique keys)
/*
created()
this.$slots.default = this.$slots.default.map((node, index) =>
node.key = `$node.tag-$index`
return node
)
*/
);
Vue.component('child-item',
render(h)
return h('div', this.$slots.default)
);
new Vue(
el: "#app"
);div
display: block;
width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<wrapper-component>
<child-item>My Child 1</child-item>
<child-item>My Child 2</child-item>
<child-item>My Child 3</child-item>
<child-item>My Child 4</child-item>
</wrapper-component>
</div>javascript vue.js
asked Mar 6 at 17:06
CICSolutionsCICSolutions
3541415
add a comment |
I have a wrapper component that is just a <transition-group> component accepting content via its default slot. The content passed through the default slot is a series of secondary vue components.
Since items in a transition group need to be keyed, how would I go about adding the key to the slot items? As they are slotted and not rendered in a v-for loop, I think the keys would need to be added programmatically.
Below is a snippet to play with. You'll see my approach in the created() hook, which seems to work on initial page load/rendering, however when hot-reload refreshes in my dev environment, the keys are lost and the error about transition group children needing keys comes back.
Is there a better approach to accomplish this that would keep hot-reload happy? Perhaps I shouldn't worry about hot-reload since it's only a development feature, but my thinking is that if hot-reload is not liking my approach, then I may be doing it incorrectly and there is probably a better way.
Thoughts?
I'm also just curious in general about when in the lifecycle is the right time to make modifications to the slot nodes. And further, is the node.key the right place to apply the unique key? Which property in the slot node is the right property to edit? (i.e. there is also a 'key' set in the component data property, when the key is set in a v-for loop)
Thanks so much for any insight you can offer!
Vue.component('wrapper-component',
render(h)
return h('transition-group', this.$slots.default)
,
// my attempt at providing a unique key for transition children is in created() hook below
// this works on itital page load/rendering - but breaks when hot-reload refreshes my development site
// uncomment created() hook to see my approach in action - works here on page reload, but does not hold up with hot-reload (i.e. once hot-reload refreshes, the transition items no longer have their unique keys)
/*
created()
this.$slots.default = this.$slots.default.map((node, index) =>
node.key = `$node.tag-$index`
return node
)
*/
);
Vue.component('child-item',
render(h)
return h('div', this.$slots.default)
);
new Vue(
el: "#app"
);div
display: block;
width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<wrapper-component>
<child-item>My Child 1</child-item>
<child-item>My Child 2</child-item>
<child-item>My Child 3</child-item>
<child-item>My Child 4</child-item>
</wrapper-component>
</div>javascript vue.js
asked Mar 6 at 17:06
CICSolutionsCICSolutions
3541415
add a comment |
I have a wrapper component that is just a <transition-group> component accepting content via its default slot. The content passed through the default slot is a series of secondary vue components.
Since items in a transition group need to be keyed, how would I go about adding the key to the slot items? As they are slotted and not rendered in a v-for loop, I think the keys would need to be added programmatically.
Below is a snippet to play with. You'll see my approach in the created() hook, which seems to work on initial page load/rendering, however when hot-reload refreshes in my dev environment, the keys are lost and the error about transition group children needing keys comes back.
Is there a better approach to accomplish this that would keep hot-reload happy? Perhaps I shouldn't worry about hot-reload since it's only a development feature, but my thinking is that if hot-reload is not liking my approach, then I may be doing it incorrectly and there is probably a better way.
Thoughts?
I'm also just curious in general about when in the lifecycle is the right time to make modifications to the slot nodes. And further, is the node.key the right place to apply the unique key? Which property in the slot node is the right property to edit? (i.e. there is also a 'key' set in the component data property, when the key is set in a v-for loop)
Thanks so much for any insight you can offer!
Vue.component('wrapper-component',
render(h)
return h('transition-group', this.$slots.default)
,
// my attempt at providing a unique key for transition children is in created() hook below
// this works on itital page load/rendering - but breaks when hot-reload refreshes my development site
// uncomment created() hook to see my approach in action - works here on page reload, but does not hold up with hot-reload (i.e. once hot-reload refreshes, the transition items no longer have their unique keys)
/*
created()
this.$slots.default = this.$slots.default.map((node, index) =>
node.key = `$node.tag-$index`
return node
)
*/
);
Vue.component('child-item',
render(h)
return h('div', this.$slots.default)
);
new Vue(
el: "#app"
);div
display: block;
width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<wrapper-component>
<child-item>My Child 1</child-item>
<child-item>My Child 2</child-item>
<child-item>My Child 3</child-item>
<child-item>My Child 4</child-item>
</wrapper-component>
</div>javascript vue.js
asked Mar 6 at 17:06
CICSolutionsCICSolutions
3541415
I have a wrapper component that is just a <transition-group> component accepting content via its default slot. The content passed through the default slot is a series of secondary vue components.
Since items in a transition group need to be keyed, how would I go about adding the key to the slot items? As they are slotted and not rendered in a v-for loop, I think the keys would need to be added programmatically.
Below is a snippet to play with. You'll see my approach in the created() hook, which seems to work on initial page load/rendering, however when hot-reload refreshes in my dev environment, the keys are lost and the error about transition group children needing keys comes back.
Is there a better approach to accomplish this that would keep hot-reload happy? Perhaps I shouldn't worry about hot-reload since it's only a development feature, but my thinking is that if hot-reload is not liking my approach, then I may be doing it incorrectly and there is probably a better way.
Thoughts?
I'm also just curious in general about when in the lifecycle is the right time to make modifications to the slot nodes. And further, is the node.key the right place to apply the unique key? Which property in the slot node is the right property to edit? (i.e. there is also a 'key' set in the component data property, when the key is set in a v-for loop)
Thanks so much for any insight you can offer!
Vue.component('wrapper-component',
render(h)
return h('transition-group', this.$slots.default)
,
// my attempt at providing a unique key for transition children is in created() hook below
// this works on itital page load/rendering - but breaks when hot-reload refreshes my development site
// uncomment created() hook to see my approach in action - works here on page reload, but does not hold up with hot-reload (i.e. once hot-reload refreshes, the transition items no longer have their unique keys)
/*
created()
this.$slots.default = this.$slots.default.map((node, index) =>
node.key = `$node.tag-$index`
return node
)
*/
);
Vue.component('child-item',
render(h)
return h('div', this.$slots.default)
);
new Vue(
el: "#app"
);div
display: block;
width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<wrapper-component>
<child-item>My Child 1</child-item>
<child-item>My Child 2</child-item>
<child-item>My Child 3</child-item>
<child-item>My Child 4</child-item>
</wrapper-component>
</div>Vue.component('wrapper-component',
render(h)
return h('transition-group', this.$slots.default)
,
// my attempt at providing a unique key for transition children is in created() hook below
// this works on itital page load/rendering - but breaks when hot-reload refreshes my development site
// uncomment created() hook to see my approach in action - works here on page reload, but does not hold up with hot-reload (i.e. once hot-reload refreshes, the transition items no longer have their unique keys)
/*
created()
this.$slots.default = this.$slots.default.map((node, index) =>
node.key = `$node.tag-$index`
return node
)
*/
);
Vue.component('child-item',
render(h)
return h('div', this.$slots.default)
);
new Vue(
el: "#app"
);div
display: block;
width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<wrapper-component>
<child-item>My Child 1</child-item>
<child-item>My Child 2</child-item>
<child-item>My Child 3</child-item>
<child-item>My Child 4</child-item>
</wrapper-component>
</div>Vue.component('wrapper-component',
render(h)
return h('transition-group', this.$slots.default)
,
// my attempt at providing a unique key for transition children is in created() hook below
// this works on itital page load/rendering - but breaks when hot-reload refreshes my development site
// uncomment created() hook to see my approach in action - works here on page reload, but does not hold up with hot-reload (i.e. once hot-reload refreshes, the transition items no longer have their unique keys)
/*
created()
this.$slots.default = this.$slots.default.map((node, index) =>
node.key = `$node.tag-$index`
return node
)
*/
);
Vue.component('child-item',
render(h)
return h('div', this.$slots.default)
);
new Vue(
el: "#app"
);div
display: block;
width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<wrapper-component>
<child-item>My Child 1</child-item>
<child-item>My Child 2</child-item>
<child-item>My Child 3</child-item>
<child-item>My Child 4</child-item>
</wrapper-component>
</div>javascript vue.js
javascript vue.js
asked Mar 6 at 17:06
CICSolutionsCICSolutions
3541415
asked Mar 6 at 17:06
CICSolutionsCICSolutions
3541415
edited Mar 6 at 17:33
CICSolutions
asked Mar 6 at 17:06
CICSolutionsCICSolutions
3541415
asked Mar 6 at 17:06
CICSolutionsCICSolutions
3541415
asked Mar 6 at 17:06
CICSolutionsCICSolutions
3541415
3541415
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Try add beforeUpdate hook:
beforeUpdate()
this.$slots.default = this.$slots.default.map((node, index) =>
node.key = `$node.tag-$index`
return node
)
answered Mar 6 at 18:42
stdob--stdob--
20.1k43351
I guess it was that simple. I'll need to do some more testing to know for sure, and the logic is needed in the created() and beforeUpdate() hooks, but it's looking good so far! Seems like editing the node.key is working, so I guess I'll just trust that this is a good way to accomplish what I need. Funny how my mind expects things to be complicated and they're not! Thanks so much for your insight!
– CICSolutions
Mar 6 at 21:24
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
);
);
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%2f55028563%2fvue-proper-way-to-modify-slots-before-rendering-goal-add-transition-group-k%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
Try add beforeUpdate hook:
beforeUpdate()
this.$slots.default = this.$slots.default.map((node, index) =>
node.key = `$node.tag-$index`
return node
)
answered Mar 6 at 18:42
stdob--stdob--
20.1k43351
I guess it was that simple. I'll need to do some more testing to know for sure, and the logic is needed in the created() and beforeUpdate() hooks, but it's looking good so far! Seems like editing the node.key is working, so I guess I'll just trust that this is a good way to accomplish what I need. Funny how my mind expects things to be complicated and they're not! Thanks so much for your insight!
– CICSolutions
Mar 6 at 21:24
add a comment |
Try add beforeUpdate hook:
beforeUpdate()
this.$slots.default = this.$slots.default.map((node, index) =>
node.key = `$node.tag-$index`
return node
)
answered Mar 6 at 18:42
stdob--stdob--
20.1k43351
I guess it was that simple. I'll need to do some more testing to know for sure, and the logic is needed in the created() and beforeUpdate() hooks, but it's looking good so far! Seems like editing the node.key is working, so I guess I'll just trust that this is a good way to accomplish what I need. Funny how my mind expects things to be complicated and they're not! Thanks so much for your insight!
– CICSolutions
Mar 6 at 21:24
add a comment |
Try add beforeUpdate hook:
beforeUpdate()
this.$slots.default = this.$slots.default.map((node, index) =>
node.key = `$node.tag-$index`
return node
)
answered Mar 6 at 18:42
stdob--stdob--
20.1k43351
Try add beforeUpdate hook:
beforeUpdate()
this.$slots.default = this.$slots.default.map((node, index) =>
node.key = `$node.tag-$index`
return node
)
answered Mar 6 at 18:42
stdob--stdob--
20.1k43351
answered Mar 6 at 18:42
stdob--stdob--
20.1k43351
answered Mar 6 at 18:42
stdob--stdob--
20.1k43351
answered Mar 6 at 18:42
stdob--stdob--
20.1k43351
20.1k43351
I guess it was that simple. I'll need to do some more testing to know for sure, and the logic is needed in the created() and beforeUpdate() hooks, but it's looking good so far! Seems like editing the node.key is working, so I guess I'll just trust that this is a good way to accomplish what I need. Funny how my mind expects things to be complicated and they're not! Thanks so much for your insight!
– CICSolutions
Mar 6 at 21:24
add a comment |
I guess it was that simple. I'll need to do some more testing to know for sure, and the logic is needed in the created() and beforeUpdate() hooks, but it's looking good so far! Seems like editing the node.key is working, so I guess I'll just trust that this is a good way to accomplish what I need. Funny how my mind expects things to be complicated and they're not! Thanks so much for your insight!
– CICSolutions
Mar 6 at 21:24
I guess it was that simple. I'll need to do some more testing to know for sure, and the logic is needed in the created() and beforeUpdate() hooks, but it's looking good so far! Seems like editing the node.key is working, so I guess I'll just trust that this is a good way to accomplish what I need. Funny how my mind expects things to be complicated and they're not! Thanks so much for your insight!
– CICSolutions
Mar 6 at 21:24
I guess it was that simple. I'll need to do some more testing to know for sure, and the logic is needed in the created() and beforeUpdate() hooks, but it's looking good so far! Seems like editing the node.key is working, so I guess I'll just trust that this is a good way to accomplish what I need. Funny how my mind expects things to be complicated and they're not! Thanks so much for your insight!
– CICSolutions
Mar 6 at 21:24
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%2f55028563%2fvue-proper-way-to-modify-slots-before-rendering-goal-add-transition-group-k%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
