Vue.js - how to pass data to another route?

Question

I am pretty new to Vue.js and have a question.

First I have this code to get all the data from my backend application:

var app2 = new Vue({
    delimiters: ['%%', '%%'],
    el: '#app2',

    data: {
        articles: []
    },

    mounted : function()
    {
        this.loadData();
    },

    methods: {
        loadData: function() {
            this.$http.get('/backend/FpArticle/articleApi').then(response => {
                // get body data
                this.articles = response.body;
            }, response => {
                // error callback
            });
        },

    },

I guess this is pretty straightforward. Now I display the data in articles on the frontend in a table view. So I do something like this:

<tr v-for="article in articles">
  <td>{{ article.name }}</td>
</tr>

This works. But now I want to create an edit mask where the user can change some data elements of this article. So I assume to do something like this:

<tr v-for="article in articles">
  <td>{{ article.name }}</td>
  <td><a href="/article/{{ article.id }}">edit</a></td>
</tr>

So I need another component that takes the id, reads the data of the article, displays it in a form and handles a save event. I think I know how I resolve the latter part, but how do I do the routing with a new component? Or is there a better way that is recommended in Vue? Something like this maybe?

<tr v-for="article in articles">
  <td>{{ article.name }}</td>
  <td><button v-on:click="editArticle(article.id)">edit</button></td>
</tr>

I am grateful for any tips! Thanks!

In editArticle, do you try to use router.push?

Quoc-Anh Nguyen
– Quoc-Anh Nguyen

2017-10-09 16:15:40 +00:00
Commented Oct 9, 2017 at 16:15 — Quoc-Anh Nguyen
– Quoc-Anh Nguyen, Commented Oct 9, 2017 at 16:15

Nicolas P. · Accepted Answer · 2017-10-10 07:18:37Z

1

Yes, you're on the right tracks. You want to use VueRouter. You have to configure routes with your components. For example:

const router = new VueRouter({
  routes: [
    { path: '/articles', component: ArticlesList },
    { path: '/articles/:id', component: Article }
  ]
})

Then, you'll reach your Article view with <router-link> (that will be rendered as <a> tag by default):

<td><router-link to="'/article/' + article.id">edit</router-link></td>

Also, you need <router-view></router-view> tag to render your components view. Component matched by the route will be rendered here.

Everything's on the documentation ;-) https://router.vuejs.org/en/essentials/getting-started.html

answered Oct 10, 2017 at 7:18

Nicolas P.

6011 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js - how to pass data to another route?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related