Calling a new Vue on router-view to display a list

Question

I am trying to write a simple single page application with Vue to gain an understanding of it's capabilities. This simple application will display a list of acronyms, then the user can click a link and be given details about that acronym. I am using vue-router to manage the routes. My basic app div is like below:

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <router-link to="/">Home</router-link>
        <router-link to="/acronyms">All Acronyms</router-link>
    </p>
    <router-view></router-view>
</div>

I first create a template to list all the acronyms:

const AllAcronyms = {template: '<div><ul id="all-acronyms"><li v-for="acronym in acronyms">{{ acronym.id }} - {{acronym.abbreviation}}</li></ul></div>' };

Then I create the router, routes, and the Vue:

    var routes = [
        {
            path: '/acronyms', component: AllAcronyms
        }
    ];
    var router = new VueRouter({
        routes: routes
    });

    var view = new Vue({
        el: "#app",
        data: {
            acronyms: [
                { id: 1, abbreviation: "ABC" },
                { id: 2, abbreviation: "DEF" },
                { id: 3, abbreviation: "GHI" }
            ]
        },
        router: router
    });

It tells me that "acronyms" is undefined. Is there a way to use the v-for directive on a router view by passing the data to that route, or to create a new Vue object on the "all-acronyms" unordered list when the route is called? What is the best way to go about this?

Eric Guan Eric Guan · Accepted Answer · 2017-08-16T16:32:07

Pass acronyms to the router-view as a prop

<router-view :acronyms="acronyms"></router-view>

EDIT:

Define acronyms as a prop in the AllAcronyms component

const AllAcronyms = { 
    props:['acronyms']
    ...
}

Calling a new Vue on router-view to display a list

1 Answers