Question

我在Vue.js中写一些东西，它需要迭代一个标签列表。点击后，每个标签都应显示带有所述标签的5个最新故事。

我正在使用vue资源而不是ajax，这一切都正常。

到目前为止，我有一个生成标签列表的组件和一个生成故事列表的子组件。孩子应该从点击的标签中获取标签ID并发出get请求。我正在努力让vue将标签id从父母传递给孩子。

我正在使用v-bind所以它看起来像这样（p.s.忽略@，使用Laravel的刀片，那就是告诉刀片不要对胡子标签采取行动）

<child v-bind:tag="@{{tags.id}}"></child>

尽管tags.id在其他地方运作良好，但它似乎不会出现在这里。

如果我尝试通过字符串文字，那就非常高兴，即：

<child tag="1"></child>

但我对vue的动态语法没有好运：tag

这是我的完整代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">


         <!-- Latest compiled and 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 all 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>

在vue.js中呈现列表时，将数据从父级传递给子级

0 个答案: