vue component this.$children are always empty
here is my code:
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>
<script>
Vue.component("selection", {
mounted: function () {
var c = this.$children
console.log(c)
},
template: `<div></div>`
})
new Vue({el: "#app"})
</script>
</body>
the output is Array(0), but in my code, selection has children selection-item, so how to get vue component "selection"'s children "selection-item"
here is my vue version:
roroco@roroco ~/Dropbox/js/ro-js/node_modules/vue $ cat package.json |gr version
"_nodeVersion": "8.4.0",
"_npmVersion": "5.4.1",
"version": "2.4.4"
javascript html vue.js
asked Jan 20 at 14:19
asullahercasullaherc
762927
add a comment |
here is my code:
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>
<script>
Vue.component("selection", {
mounted: function () {
var c = this.$children
console.log(c)
},
template: `<div></div>`
})
new Vue({el: "#app"})
</script>
</body>
the output is Array(0), but in my code, selection has children selection-item, so how to get vue component "selection"'s children "selection-item"
here is my vue version:
roroco@roroco ~/Dropbox/js/ro-js/node_modules/vue $ cat package.json |gr version
"_nodeVersion": "8.4.0",
"_npmVersion": "5.4.1",
"version": "2.4.4"
javascript html vue.js
asked Jan 20 at 14:19
asullahercasullaherc
762927
add a comment |
here is my code:
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>
<script>
Vue.component("selection", {
mounted: function () {
var c = this.$children
console.log(c)
},
template: `<div></div>`
})
new Vue({el: "#app"})
</script>
</body>
the output is Array(0), but in my code, selection has children selection-item, so how to get vue component "selection"'s children "selection-item"
here is my vue version:
roroco@roroco ~/Dropbox/js/ro-js/node_modules/vue $ cat package.json |gr version
"_nodeVersion": "8.4.0",
"_npmVersion": "5.4.1",
"version": "2.4.4"
javascript html vue.js
asked Jan 20 at 14:19
asullahercasullaherc
762927
here is my code:
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>
<script>
Vue.component("selection", {
mounted: function () {
var c = this.$children
console.log(c)
},
template: `<div></div>`
})
new Vue({el: "#app"})
</script>
</body>
the output is Array(0), but in my code, selection has children selection-item, so how to get vue component "selection"'s children "selection-item"
here is my vue version:
roroco@roroco ~/Dropbox/js/ro-js/node_modules/vue $ cat package.json |gr version
"_nodeVersion": "8.4.0",
"_npmVersion": "5.4.1",
"version": "2.4.4"
javascript html vue.js
javascript html vue.js
asked Jan 20 at 14:19
asullahercasullaherc
762927
asked Jan 20 at 14:19
asullahercasullaherc
762927
asked Jan 20 at 14:19
asullahercasullaherc
762927
asked Jan 20 at 14:19
asullahercasullaherc
762927
asked Jan 20 at 14:19
asullahercasullaherc
762927
762927
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Based on the docs on $children:
The direct child components of the current instance. Note there’s no order guarantee for
$children, and it is not reactive. If you find yourself trying to use$childrenfor data binding, consider using an Array andv-forto generate child components, and use the Array as the source of truth.
Another option is to make use of $slots which holds the direct child components wrapped in VNode interface.
Vue.component("selection", {
mounted() {
var children = this.$slots.default;
//console.log(children);
},
template: `
<div>
<slot></slot>
</div>`
});
Vue.component("selection-item", {
template: `<div></div>`
});
new Vue({
el: "#app"
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>If you need the children as HTML element, they will be inside this same wrapper, under a property called elm. Also note that despite the singular name, this.$slots.default is actually an array. So something like,
const children = this.$slots.default
.map(vnode => vnode.elm)
.filter(el => el.tagName === 'DIV');
answered Jan 20 at 17:13
jomjom
1,8661616
add a comment |
I find the solution: i should add <slot></slot> in vue component template, here is work code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>
<script>
Vue.component("selection-item", {
template: `<div>prpr</div>
`
})
Vue.component("selection", {
mounted: function () {
var c = this.$children
console.log(c)
},
template: `<div><slot></slot></div>`
})
new Vue({el: "#app"})
</script>
</body>
</html>
answered Jan 22 at 13:59
asullahercasullaherc
762927
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%2f54277368%2fvue-component-this-children-are-always-empty%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Based on the docs on $children:
The direct child components of the current instance. Note there’s no order guarantee for
$children, and it is not reactive. If you find yourself trying to use$childrenfor data binding, consider using an Array andv-forto generate child components, and use the Array as the source of truth.
Another option is to make use of $slots which holds the direct child components wrapped in VNode interface.
Vue.component("selection", {
mounted() {
var children = this.$slots.default;
//console.log(children);
},
template: `
<div>
<slot></slot>
</div>`
});
Vue.component("selection-item", {
template: `<div></div>`
});
new Vue({
el: "#app"
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>If you need the children as HTML element, they will be inside this same wrapper, under a property called elm. Also note that despite the singular name, this.$slots.default is actually an array. So something like,
const children = this.$slots.default
.map(vnode => vnode.elm)
.filter(el => el.tagName === 'DIV');
answered Jan 20 at 17:13
jomjom
1,8661616
add a comment |
Based on the docs on $children:
The direct child components of the current instance. Note there’s no order guarantee for
$children, and it is not reactive. If you find yourself trying to use$childrenfor data binding, consider using an Array andv-forto generate child components, and use the Array as the source of truth.
Another option is to make use of $slots which holds the direct child components wrapped in VNode interface.
Vue.component("selection", {
mounted() {
var children = this.$slots.default;
//console.log(children);
},
template: `
<div>
<slot></slot>
</div>`
});
Vue.component("selection-item", {
template: `<div></div>`
});
new Vue({
el: "#app"
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>If you need the children as HTML element, they will be inside this same wrapper, under a property called elm. Also note that despite the singular name, this.$slots.default is actually an array. So something like,
const children = this.$slots.default
.map(vnode => vnode.elm)
.filter(el => el.tagName === 'DIV');
answered Jan 20 at 17:13
jomjom
1,8661616
add a comment |
Based on the docs on $children:
The direct child components of the current instance. Note there’s no order guarantee for
$children, and it is not reactive. If you find yourself trying to use$childrenfor data binding, consider using an Array andv-forto generate child components, and use the Array as the source of truth.
Another option is to make use of $slots which holds the direct child components wrapped in VNode interface.
Vue.component("selection", {
mounted() {
var children = this.$slots.default;
//console.log(children);
},
template: `
<div>
<slot></slot>
</div>`
});
Vue.component("selection-item", {
template: `<div></div>`
});
new Vue({
el: "#app"
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>If you need the children as HTML element, they will be inside this same wrapper, under a property called elm. Also note that despite the singular name, this.$slots.default is actually an array. So something like,
const children = this.$slots.default
.map(vnode => vnode.elm)
.filter(el => el.tagName === 'DIV');
answered Jan 20 at 17:13
jomjom
1,8661616
Based on the docs on $children:
The direct child components of the current instance. Note there’s no order guarantee for
$children, and it is not reactive. If you find yourself trying to use$childrenfor data binding, consider using an Array andv-forto generate child components, and use the Array as the source of truth.
Another option is to make use of $slots which holds the direct child components wrapped in VNode interface.
Vue.component("selection", {
mounted() {
var children = this.$slots.default;
//console.log(children);
},
template: `
<div>
<slot></slot>
</div>`
});
Vue.component("selection-item", {
template: `<div></div>`
});
new Vue({
el: "#app"
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>If you need the children as HTML element, they will be inside this same wrapper, under a property called elm. Also note that despite the singular name, this.$slots.default is actually an array. So something like,
const children = this.$slots.default
.map(vnode => vnode.elm)
.filter(el => el.tagName === 'DIV');
Vue.component("selection", {
mounted() {
var children = this.$slots.default;
//console.log(children);
},
template: `
<div>
<slot></slot>
</div>`
});
Vue.component("selection-item", {
template: `<div></div>`
});
new Vue({
el: "#app"
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>Vue.component("selection", {
mounted() {
var children = this.$slots.default;
//console.log(children);
},
template: `
<div>
<slot></slot>
</div>`
});
Vue.component("selection-item", {
template: `<div></div>`
});
new Vue({
el: "#app"
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>answered Jan 20 at 17:13
jomjom
1,8661616
answered Jan 20 at 17:13
jomjom
1,8661616
answered Jan 20 at 17:13
jomjom
1,8661616
answered Jan 20 at 17:13
jomjom
1,8661616
1,8661616
add a comment |
add a comment |
I find the solution: i should add <slot></slot> in vue component template, here is work code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>
<script>
Vue.component("selection-item", {
template: `<div>prpr</div>
`
})
Vue.component("selection", {
mounted: function () {
var c = this.$children
console.log(c)
},
template: `<div><slot></slot></div>`
})
new Vue({el: "#app"})
</script>
</body>
</html>
answered Jan 22 at 13:59
asullahercasullaherc
762927
add a comment |
I find the solution: i should add <slot></slot> in vue component template, here is work code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>
<script>
Vue.component("selection-item", {
template: `<div>prpr</div>
`
})
Vue.component("selection", {
mounted: function () {
var c = this.$children
console.log(c)
},
template: `<div><slot></slot></div>`
})
new Vue({el: "#app"})
</script>
</body>
</html>
answered Jan 22 at 13:59
asullahercasullaherc
762927
add a comment |
I find the solution: i should add <slot></slot> in vue component template, here is work code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>
<script>
Vue.component("selection-item", {
template: `<div>prpr</div>
`
})
Vue.component("selection", {
mounted: function () {
var c = this.$children
console.log(c)
},
template: `<div><slot></slot></div>`
})
new Vue({el: "#app"})
</script>
</body>
</html>
answered Jan 22 at 13:59
asullahercasullaherc
762927
I find the solution: i should add <slot></slot> in vue component template, here is work code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<selection>
<selection-item></selection-item>
<selection-item></selection-item>
</selection>
</div>
<script>
Vue.component("selection-item", {
template: `<div>prpr</div>
`
})
Vue.component("selection", {
mounted: function () {
var c = this.$children
console.log(c)
},
template: `<div><slot></slot></div>`
})
new Vue({el: "#app"})
</script>
</body>
</html>
answered Jan 22 at 13:59
asullahercasullaherc
762927
answered Jan 22 at 13:59
asullahercasullaherc
762927
answered Jan 22 at 13:59
asullahercasullaherc
762927
answered Jan 22 at 13:59
asullahercasullaherc
762927
762927
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%2f54277368%2fvue-component-this-children-are-always-empty%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
