CODEWITHSUNDEEP
javascripthtmlnode.jsvue.jsvuetify.js
mehrad
mehrad

Reputation: 61

dynamic button in vue.js for navigation to dynamic route

I want to pass dynamic route and get a single user information by click on a button, i'm using vuetify so i want to know how to pass userId in button for example this is my URL :http://localhost:8080/users/userId i can get the userid from database for example if
userId = 3984EDeid9dnh3kd9i http://localhost:8080/users/3984EDeid9dnh3kd9i but i don't know how to add it to a button

this is my code:


 <v-container fluid>
      <v-row class="my-0">
        <v-col
          v-for="(user, userId) in users"
          :key="userId"
          class="col-lg-2 col-md-3 col-sm-4 col-xs-6"
        >
          <template>
            <v-card hover :loading="loading" class="mx-auto" max-width="374">
              <template slot="progress">
                <v-progress-linear
                  color="deep-purple"
                  height="10"
                  indeterminate
                ></v-progress-linear>
              </template>


              <h4 text-right">
                username :
                <span class="font-weight-bold blue--text">
                  {{ user.userName}}
                </span>
              </h4>

              <v-card-actions>
                <v-col>
                  <v-btn
                    text
                    class="float-left"
                    style="text-decoration: none; color: inherit"
                    max-width="50px"
                    :to = HERE IS MY PROBLEM  <===================
                    
                    >More
                  </v-btn>
                </v-col>
              </v-card-actions>
            </v-card>
          </template>
        </v-col>
      </v-row>
    </v-container>
<script>
export default {
  data() {
    return {
//after using axios and get userId
        userId : this.getId
    };
  },

so i can show userId of all users in loop i just want to know how to pass dynamic route by using :to and get single user information

Upvotes: 1

Views: 967

Answers (2)

Riyaz Khan
Riyaz Khan

Reputation: 3238

You just need to pass either string or object in v-btn "to" props, it will open the link.

:to="{ name: 'users', params: { userId: userID }}"

Example with your code:

<v-btn
      text
      class="float-left"
      style="text-decoration: none; color: inherit"
      max-width="50px"
      :to="{ name: 'users', params: { userId: user.id }}"
      >More
    </v-btn>

Upvotes: 1

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try out to concatenate the id to the path as follows:

 :to ="'/users/'+user.id"

or

:to ="`/users/${user.id}`"

Upvotes: 2

Related Questions