Vue render a component two times

Viewed 207

When I logged in the app and select edit some item, they make a $router.push to the edit view, the problem is that they render the component two times, I figured this out by doing a console.log on mounted(){}.. However, if I reload the page and click edit other time they make the render correctly, only one time.

This is the relevant code:

//listItemsView script
editItem(item) { 
  this.$router.push({ name: 'editPolicy', params:{policyTest: item}})
},

//editItemView script
export default {
  props:{
      policyTest:{
        type: Object,
        required: true,
      }
   mounted(){
      console.log(this.policyTest);
      console.log('entra');  
   },
 }
 //router script
 {
    path: '/editPolicy/', 
    name: 'editPolicy',
    component: () => import('../views/policies/editPolicy.vue'),
    props: true,
    meta:{requireAuth:true}
  }
  
  router.beforeEach((to, from, next) => {
  const user = auth.currentUser;
  if(user !== null){
    user.getIdTokenResult(true)
        .then(function ({
          claims
        }) {
          if (to.name === 'NewClient' && !claims.permissions.includes('Agregar Cliente')) {
            next({name: 'notFoundPage'});
          }else{
            //In this case the router execute this next()
            next()
          }
        })
    } else {
      if (to.matched.some(record => record.meta.requireAuth)) {
        next({name: 'SignIn'});
      } else { 
        next()
      }
  }
})
//html
<td class="text-left">
   <v-icon small class="mr-2" @click="editItem(item)">fas fa-edit</v-icon>
</td>

console.log result

1 Answers

i solved the problem, I'm use firebase authentication and in the main.js i'm detecting the user state change and for error i was creating two vue instances, one when start up the App and other when the user attemp to make their logging.. solved, thanks

Related