I'm using dynamic routing with vue router in vue js but can't get data by id-CodePudding

I'm using dynamic router to navigate from dashboard to detail page, in URL bar still get id but it doesn't work for detail page and console gives error : GET http://localhost:1337/jobinfos/undefined Here is code my overview page

Jobs.vue:

<div  v-for="(item, index) in showJobs" :key="index">
          <a href=""
            ><h3 >{{ item.position }}</h3></a
          >
                <img src="../assets/recruit/years.svg" alt="" />
                <b>{{ item.exprerience }}</b>
                <img src="../assets/recruit/luong.svg" alt="" />
                <b>{{ item.salary }}</b>
                <img src="../assets/recruit/diadiem.svg" alt="" />
                <b>{{ item.headequarters }}</b>
              <h6>{{ item.createdAt }}</h6>
            <div  v-html="item.content">
           <router-link tag="a" :to="`/detail/${item.id}`">
              <button >See Detail</button>
            </router-link>
          </div>
<script>
import axios from 'axios'
export defaul{
methods: {
    async getJobs() {
      await axios
        .get(`http://localhost:1337/jobinfos`)
        .then((response) => {
          this.jobinfos = response.data;
        })
        .catch((e) => {});
    },
}
</script

And here is the job detail page, i tried to set id = 1 instead of this.id and console.log got the data but it still can't display those data..

<div  v-for="(item, index) in jobinfos" :key="index">
            <div>
              <h6>Job Requirements</h6>
              <ul v-html="item.requirements">
                 
              </ul>
            </div>
          </div>
          <div >
            <div>
              <h6>Skills</h6>
              <ul v-html="item.skills"></ul>
            </div>
          </div>
          <div >
            <div>
              <h6>Interests</h6>
              <ul v-html="item.interests"></ul>
            </div>
          </div>
        </div>
<script>
import axios from 'axios'
export defaul{
 props:['id'],
mounted(){
    this.getdetail();
  
  },
methods: {
   async getdetail() {
      await axios
        .get(`http://localhost:1337/jobinfos/`   this.id)
        .then((response) => {
          this.jobinfos = response.data;
          console.log(response.data)
        })
        .catch((e) => {});
    },
}
</script>

Hope to get help from everyone...thanks ^^

CodePudding user response：

You need to get the id from the router. For this to work, you first need to define your dynamic route in your routes file, like:

{
  path: '/product/:id',
  component: JobDetail, /// example, use your detail component
}

Now, when you navigate to /product/1, the id will be set as a param in the router. So in the JobDetail component, you can get it by using const id = this.$route.params.id. You can use this in your getdetail method:

async getdetail() {
   const id = this.$route.params.id
   await axios
      .get(`http://localhost:1337/jobinfos/`   id)
      .then((response) => {
          this.jobinfos = response.data;
          console.log(response.data)
       })
       .catch((e) => {});
},

You can remove id as a prop, as it is unused.

Hope this helps.

PS: Another small remark on your code: in your Jobs.vue you use index as a key for v-for. This is not recommended, because when the showJobs array changes, the index of the items inside will change. Therefore, vue cannot track which element was deleted or added and will need to completely rerender the v-for again. You should use a unique key, like item.id. This will stay always stay the same and vue will only rerender the change.