Question

我第一次玩vue并且敲了一个简单的测试文件。我有一个表由api调用的数据填充，并使用vue路由器创建每个项目的链接，但此链接不显示内容。网络显示它向api发出请求，但由于某种原因，模板没有显示（甚至没有显示硬编码的内容）。为什么？另外，为什么路由内容不显示在第一个路由器视图上，而只显示在tbl组件中的路由器视图？

<!doctype html>
<html lang="en">
<head>
    <title>Vue.js test</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="app">
        <!-- this route displays correctly -->
        <router-link to="/foo">Go to Foo</router-link>
        <table-notification/> 
          <!-- content is not displayed here - why? --> 
          <router-view></router-view>
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router"></script>
    <script src="axios.min.js"></script>

    <script>    
        const foo = {template:'<div>asdfasdf</div>',};

        var router = new VueRouter({
            routes: [
                {path: '/foo', component: foo},
                {path: '/notifications/:id', component: notification_view}
            ]
        });

        var app = new Vue({
            router: router
        }).$mount('#app');

        var notification_view = new Vue({
            router: router,
            template: `
                <div>iop
                    id: {{ obj.id}}<br/>
                    title: {{ obj.data.title}}<br/>
                    message: {{obj.data.message}}<br/>
                </div>      
            `,

            data: {
                obj: {},
                id: 0,
            },

            watch: {
                '$route' (to, from) { 
                    // check for id in url
                    if (this.$route.params.id)
                        this.update_notification(); 
                }
            },

            methods: {
                update_notification: function(){
                    this.id = this.$route.params.id;
                    axios.get('http://api2/notifications/' + this.id)
                        .then(response => {this.obj = response.data.packet;});
                }
            }
        });

        var tbl = new Vue({
            router:router,
            el: 'table-notification',
            template: `
            <div>
                <table>
                    <tr>
                        <th>Title</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                    <tr v-for="obj in objects">
                        <td><router-link :to="link(obj)">{{obj.data.title}}</router-link></td>
                        <td>{{obj.created}}</td>
                        <td>actions</td>
                    </tr>
                </table>
                <router-view/>
                <!-- why must router-view be here, and why isn't notification_view showing any output?-->
            </div>
            `,
            methods: {
                link: function(obj) {return '/notifications/' + obj.id;}
            },

            data: {
                objects: [],
            },

            created: function(){
                axios.get('http://api2/notifications').
                    then(response => 
                    {
                        this.objects = response.data.packet;
                    });
            }


        });
    </script>
</body>
</html>

Answer 1

我认为你误解了Vue实例的想法......

在你的例子中你有：

一个JSON foo，我认为它是一个组件，
安装在#app元素
另一个名为notification_view的实例使用相同的路由器，我认为是另一个组件
另一个tbl实例，我认为它是另一个组件

您实际上需要一个实例和一组组件，如下例所示：

https://jsfiddle.net/dcr3jyzo/

我如何在这个vue示例中显示内容？

1 个答案: