Router-link dynamic vueJS

Question

I'm new to vueJS. I am creating a news system to train myself. I'm a little problem. Here is the link that allows me to go to the detail of an article:

<router-link :to="{ name: 'Blog Details', params: { id: 1 }}"><img v-bind:src="postThumbnail" v-bind:alt="title"></router-link>

My component on which this link is located, has several props including the article id (actu_id).

In the link to the article, I would like the id located in the params not to be hard "1", but actu_id.

I do not know how to do.

Answer 1

When building things like this, first think how the data gets to your page. It's probably most efficient to use loops here, assuming you'll have multiple blog posts. Save them in the data in an array:

    blogs: [
      {
        name: "Post 1",
        id: 1,
        thumbnail: "agsrgsghr.jpg",
      },
      {
        name: "Post 2",
        id: 2,
        thumbnail: "agsrgsghr2.jpg",
      },
    ],

And you can use template literals to set the router link parameters

  <div v-for="blog in blogs" :key="blog.id">
      <router-link :to="{ name: `${blog.name}`, params: { id: `${blog.id}` } }"
        ><img :src="blog.thumbnail" :alt="blog.name"
      /></router-link>
    </div>