vue.js - [Rails][Vue] Empty array returned when fetching the children nested within a parent component. Any idea why is this happening? -
i'm using rails 5.1 + webpack running vue 2. i'm new vue, not new rails.
i'm building navbar component starting bulma navbar. objective able dynamically create links in navbar adding navlink element nested within.
in application.html.erb have created structure (navlink nested inside navbar).
in hello_vue.js i'm initializing vue components , assigning them root element (one navbar , 1 rest of content).
in navbar.vue, i'd iterate through , create menu item accordingly. in order so, added empty navlinks data navbar want populate once gets mounted() fetching children (the nested navlink tags).
this not working, whenever reference this.$children empty array. idea why happening?
this code.
application.html.erb
<!doctype html> <html> <head> <title>railsvue</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <%= stylesheet_pack_tag 'hello_vue' %> </head> <body> <div id="navbar-container"> <navbar> <navlink href="http://google.com"> link 1 </navlink> <navlink href="http://facebook.com"> link 2 </navlink> </navbar> </div> <%= yield %> <%= javascript_pack_tag 'hello_vue' %> </body> </html> hello_vue.js
import vue 'vue/dist/vue.esm' import app './app.vue' import navlink './components/navlink.vue' import navbar './components/navbar.vue' const navbar = new vue({ el: "#navbar-container", components: { navbar, navlink } }) const app = new vue({ el: '#hello', data: { message: "can hello?" }, components: { app } }) navbar.vue
<template> <div> <nav class="navbar is-transparent"> <div class="navbar-brand"> <a class="navbar-item" href="http://bulma.io"> <img src="http://bulma.io/images/bulma-logo.png" alt="bulma: modern css framework based on flexbox" width="112" height="28"> </a> <div class="navbar-burger burger" data-target="navmenutransparentexample"> <span></span> <span></span> <span></span> </div> </div> <div id="navmenutransparentexample" class="navbar-menu"> <div class="navbar-start"> <a v-for="navlink in navlinks" class="navbar-item" :href="navlink.href"> <slot></slot> </a> </div> </div> </nav> </div> </template> <script> import navlink './navlink.vue' export default { name: "navbar", data: function () { return { navlinks: [] } }, created: function(){ // let children = this.$children; console.log(this.$children); // this.navlinks = this.$children; // this.navlinks = this.$children; } } </script> navlink.vue
<template> <div class="navlink"> <slot></slot> </div> </template> <script> export default { name: "navlink" } </script>
instead of created hook, use mounted hook, can able this.$children
mounted : function(){ // let children = this.$children; console.log(this.$children); // this.navlinks = this.$children; // this.navlinks = this.$children; } you can modify components achieve requirement follows
application.html.erb
<!doctype html> <html> <head> <title>railsvue</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <%= stylesheet_pack_tag 'hello_vue' %> </head> <body> <div id="navbar-container"> <navbar> <navlink> <a class="navbar-item" href="http://google.com"> link 1 </a> </navlink> <navlink> <a class="navbar-item" href="http://facebook.com"> link 2 </a> </navlink> </navbar> </div> <%= yield %> <%= javascript_pack_tag 'hello_vue' %> </body> </html> hello_vue.js
import vue 'vue/dist/vue.esm' import app './app.vue' import navlink './components/navlink.vue' import navbar './components/navbar.vue' const navbar = new vue({ el: "#navbar-container", components: { navbar, navlink } }) navbar.vue
<template> <div> <nav class="navbar is-transparent"> <div class="navbar-brand"> <a class="navbar-item" href="http://bulma.io"> <img src="http://bulma.io/images/bulma-logo.png" alt="bulma: modern css framework based on flexbox" width="112" height="28"> </a> <div class="navbar-burger burger" data-target="navmenutransparentexample"> <span></span> <span></span> <span></span> </div> </div> <slot></slot> </nav> </div> </template> <script> // import navlink './navlink.vue' export default { name: 'navbar', data: function () { return { navlinks: [] } }, mounted: function () { // let children = this.$children; // console.log(this) console.log(this.$children) // console.log(this.$root.$children[0]) // this.navlinks = this.$children // this.navlinks = this.$children; } } </script> navlink.vue
<template> <div class="navlink"> <slot></slot> </div> </template> <script> export default { name: 'navlink' } </script> 
Comments
Post a Comment