javascript - Passing data from parent to child when rendering a list in vue.js -
i writing in vue.js , requires iterating on list of tags. when clicked, each of tags should show 5 recent stories said tag.
i using vue resources rather ajax , working fine.
so far have 1 component generates list of tags , child component generate list of stories. child should take tag id clicked tag , make request. struggling make vue pass tag id parent child.
i using v-bind looks (p.s. ignore @, using laravel's blade , tell blade not act on moustache tags)
<child v-bind:tag="@{{tags.id}}"></child> though tags.id works elsewhere, not appear here.
if try pass through string literal quite happy, ie:
<child tag="1"></child> but having no luck vue's dynamic syntax :tag
here full code:
<!doctype html> <html> <head> <title>laravel</title> <link href="https://fonts.googleapis.com/css?family=lato:100" rel="stylesheet" type="text/css"> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <style type="text/css"> .toggled { display: none; } </style> </head> <body> <div class="container"> <h1>my tags</h1> <tags></tags> </div> <template id="tags-template"> <ul class="list-group" > <li class="list-group-item" v-for="tags in list" @click=" tags.open =! tags.open" > <span>@{{ tags.name }}</span> <div v-bind:class="{'toggled': tags.open}"> <a href="@{{url}}@{{tags.id}}">see recent stories @{{tags.id}}</a> <child v-bind:tag="@{{tags.id}}"></child> </div> </li> </ul> </template> <template id="stories-template"> <p>stories dropdown goes here @{{ tag }}</p> </template> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.js"></script> <script> vue.component('tags', { // template: '#tags-template', data: function() { return { list: [], url: '/tags/', }; }, created: function() { this.fetchtagslist(); }, methods: { fetchtagslist: function() { var resource = this.$resource('/api/tags/{id}'); resource.get( {}, function(tags) { this.list = tags; }.bind(this)); }, // toggle: function() { // var resource = this.$resource('/api/storyfromtag/{id}'); // resource.get( {id: 1}, function(stories) // { // this.list = stories; // }.bind(this)); // alert(stories); // } } }), vue.component('child', { props: ['tag'], template: '#stories-template' }) new vue ({ el: 'body' }) </script> </body> </html>
Comments
Post a Comment