Pass $route as parameter in axios post request

So I have a vue project with a dashboard that contains many tests and i want to pass the test name as a parameter in an axios request when the user clicks on a button and gets redirected on another page.

I already did the first part and passed the name of the test in route as a parameter name and now i’m trying to fetch the corresponding item in the collection.When using $route.params.name I get an error that says $route is not defined here’s my code so far

<template>
  <v-app>
           
    <app-navbar />

    <v-main>
      <div class="text-center">
      <h3>
        test {{ $route.params.name }}, {{ $route.query.status }},{{
          $route.query.tag
        }}
      </h3>
      <h3 v-if="this.loadAPI">{{failreason()}}</h3>
      </div>

  
        <v-data-table
    :headers="headers"
    :items="imagesref"
    :items-per-page="5"
    class="elevation-1"
  >
  <template v-slot:[`item.index`]="{ index }">
     
        {{index+1}}
  </template>
  <template v-slot:[`item.status`]="{ index }">
     {{imagesresult[index][2]}}
        
 
  </template>
  
  <template v-slot:[`item.ref`]="{ index }">
   
        <v-img :src="imagesref[index]" max-width="750" max-height="750"   @click="expref[index] = !expref[index]"/>
        <v-overlay :value="expref[index]"><v-img :src="imagesref[index]" max-width="1300" max-height="900" @click="expref[index] = !expref[index]"/> </v-overlay>
        
  
  </template>
   <template v-slot:[`item.test`]="{ index }">
     
        <v-img :src="imagestest[index]" max-width="750" max-height="750" @click="exptest[index] = !exptest[index]"/>
        <v-overlay :value="exptest[index]"><v-img :src="imagestest[index]" max-width="1300" max-height="900" @click="exptest[index] = !exptest[index]"/> </v-overlay>

  </template>
     <template v-slot:[`item.res`]="{ index }">
       
       <v-img :src="imagesresult[index][0]" max-width="750" max-height="750" @click="expres[index] = !expres[index]"/>
        <v-overlay :value="expres[index]"><v-img :src="imagesresult[index][0]" max-width="1300" max-height="900" @click="expres[index] = !expres[index]"/> </v-overlay>

  </template>
  <template #[`item.mis`]="{ index }">
    {{Math.round(imagesresult[index][1]*100)/100}}
    
  </template>
  <template #[`item.Scrubber`]="{ index }">
    <nuxt-link :to="{ path: 'scrubber', query: { imageref: imagesref[index],imagetest:imagestest[index],imageres:imagesresult[index] }}">Show Scrubber</nuxt-link>

  </template>
  </v-data-table>


    </v-main>
 
  </v-app>
</template>

<script>
import appNavbar from "../../../components/appNavbar.vue"
import axios from "axios"
export default {
  components: { appNavbar },
  name: "App",
  data() {
    return {
      loadAPI:false,
      dialog:false,
      expref:[],
      exptest:[],
      expres:[],
      items: [],
      imagesref: [],
      imagestest: [],
      imagesresult: [],
      
              headers: [
          { text: 'index',value: 'index',sortable:false},
          { text: 'Status',value: 'status',sortable:false},
          { text: 'Imagesref', value: 'ref',sortable:false },
          { text: 'Imagestest', value: 'test',sortable:false },
          { text: 'Imagesresult', value: 'res',sortable:false },
          { text: 'Mismatch percent', value: 'mis',sortable:false },
          { text: 'Scrubber', value: 'Scrubber',sortable:false },
        ]
    }
  },
  async created() {
    try {
     const res = await axios({
  method: 'post',
  url: 'http://localhost:3002/backend/gettestbyname',
  data: {name: $route.params.name}
})
      this.items = res.data.data;
      this.imagesref = res.data.data[0].refimages;
      this.imagestest = res.data.data[0].testimages;
      this.imagesresult = res.data.data[0].testresults;
      for (let i of this.imagesref){
        this.expref.push(false);
        this.exptest.push(false);
        this.expres.push(false);
      }
    this.loadAPI=true;
    } catch (error) {
      console.log(error);
    }
  },
  methods:{
    failreason()
    {

      
      if (this.items[0].status=="failed"){
        let index=0;
        for (let i of this.items[0].testresults)
        { console.log(i);
        index++;
          if (i[2]=="failed")
          {
            return 'Visual test failed at step number '+index;      
          }
        }
        return 'Test set missing screenshots';
    }
    }
  } 
}
</script>
<style  scoped>
</style>

Answer

Globally injected properties in Vue are available from the Vue context, not the global javascript context (like window).

So, in the <script> tag, you have to use this.$router to access it.

In your created hook:

// replace
data: {name: $route.params.name}

//by
data: {name: this.$route.params.name}

From the vue-router docs:

By calling app.use(router), we get access to it as this.$router as well as the current route as this.$route inside of any component:

Advertisement

Answer