CODEWITHSUNDEEP
javascripthtmlvue.js
sara97
sara97

Reputation: 401

vue : can't navigate to another page

i'm new to vue and i have created a dynamic page that gets questions,user name, and categories from API ,every thing is showing fine but my problem is i want to make those dynamic (user name for example) is clickable so when ever i click on it it should take me to user's profile with same name, i have tried to do a clickable div but only the url route changes not the content of the page (it's not taking me to the profile page), also as u see in my code i created a function in methods that saved my clickable user in index and i'm trying to show this user saved in index in my profile page but i didn't figure out how to do it, any help please?

hom.vue

 <p>Asked by:  </p>
  
  <div id="user" v-for="(user, index) in users"
   :key="index"> 
 <div @click="selectedUser(index)">{{ user }}</div>
   
      </div>
      
      export default {
 props: {
  
    question1: Object

  },
     data() {
    return {
     
      selectedIndex: null,
      
    };
  },
  watch: {
    question1: {
   

      handler() {
        this.selectedIndex = null;
       
      },
    },
  },
  computed: {
    users() {
      let users = [this.question1.user];
      return answers;
    },
  
  },
  methods: {//here i saved the user that i clicked on in index in order to show it to the profile page
    selectedUser(index) {
      this.selectedIndex = index;
       this.$router.push('/Profile')


    },
  }
}




profile.vue

<template>

  <div class="container" width=800px>


  <b-row id="asked-info">
  <p>Welcome to the profile of:  </p>
  
  <div id="user" v-for="(user, index) in users"
   :key="index"> 
  
   {{ user }}
      </div>
    
     


  </b-row>
 
  </div>

</template>
<script>
export default {
 
  props: {
  
    question1: Object

  },
  
  computed: {
    users() {
      let users = [this.question1.user];
     // here i'm not able to figure out how will the user i saved in index (the user i clicked on) will show here
      return users;
    },
  
  },
}
</script>

</script>

Upvotes: 1

Views: 575

Answers (1)

KienHT
KienHT

Reputation: 1346

You can pass the index via props to route components.

Your selectedUser function would be like:

selectedUser(index) {
   this.$router.push({ path: `/Profile/${index}` })
},

In your Router instance:

routes: [
    { 
        path: '/profile/:index', 
        component: Profile, 
        props: true //to specify that you are using props
    },
    //your other routes
]

Then in the profile.vue, you can access the index by this syntax: this.$route.params.index

But this is just how you pass the index to the profile.vue page, eventually you need to have access to the users array which you have in the hom.vue page, which means that you are sharing data between components (or pages). I strongly suggest you to use Vuex, the Vue state management, a centralized store for your app. You can check out their documentation here: https://vuex.vuejs.org/#what-is-a-state-management-pattern

Upvotes: 1

Related Questions