Home » vue » how do i show content in this vue example?

how do i show content in this vue example?

Posted by: admin November 26, 2021 Leave a comment

Questions:

I’m playing with vue for the first time and have knocked up a simple test file. I have a table that is populated by data from an api call, and have used the vue router to create links to each item but this link isn’t displaying the content. the network shows it’s making the request to the api, but for some reason the template is not showing (not even the hard-coded content). Why? Also, why does the route content not display on the first router view, but only the router-view in the tbl component?

<!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>
Answers:

I think you are misunderstanding the idea of Vue instances…

In you example you have:

  1. a JSON foo that I think it is a component,

  2. An App instance, which is mounted to the #app element

  3. Another instance called notification_view with the same router, what I think is is another component

  4. Another tbl instance, that I think it is another component

You actually need one instance and a bunch of components as in this example:

https://jsfiddle.net/dcr3jyzo/