Adding Routes to Vuetify Buttons within v-cards?

Question

This should be a simple fix but not sure where to start.

I have..

<template>
  <div class="mx-5 mb-5 Weapons">
    <h1 class="green--text">Weapons</h1>

    <v-container class="my-5">
      <v-layout row wrap>
        <v-flex xs12 s6 m4 lg3 v-for="weapon in assaultrifles" :key="weapon.weapontype">
          <v-card class="text-md-center ma-3 black">
            <v-responsive class="pt-4">
              <v-img contain :src="weapon.images"></v-img>
            </v-responsive>
            <v-card-title class="justify-center">
              <div class="heading font-weight-black white--text">{{ weapon.WeaponType}}</div>
            </v-card-title>
            <v-card-actions class="justify-center">
              <v-btn flat class="green black--text ma-3">View Weapons</v-btn>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

I then have data in arrays with images and "titles" for these cards. I have about 8 cards , each representing its own "category" which is represented by the "title" data in my array.

What I am trying to do is make it so if I click on a card with the category/title "Handgun" or click on a card "rifle", I will be routed to a new page where I list out items for that specific category.. however I am not sure where to start because I am simply passing {{weapon.WeaponType}} into 1 card object, and then using 1 button ( with the text "view weapon"), across all the cards.

My understanding is that if I make a route for the 1 button I made, then the route will be the same for all buttons, despite the cards representing its own category, which would be bad because I don't want to see "handguns" when I click on the "shotgun" card’s button.

I want to somehow keep my current structure ( using 1 object and passing a loop of data ) and 1 btn, so that my code stays around the same length/structure).

Thanks for reading.

IVO GELOV IVO GELOV · Accepted Answer · 2019-09-01T16:57:42

You will need additional property in your objects - for the route of the button:

<v-btn 
  flat 
  class="green black--text ma-3"
  :to="weapon.route"
>
  View Weapons
</v-btn>

The weapon.route can be a string or an object.

Another option is to provide just the category IDs and then

<v-btn 
  flat 
  class="green black--text ma-3"
  :to="{name: 'weaponItems', params: {categoryID: weapon.categoryID}}"
>
  View Weapons
</v-btn>

Adding Routes to Vuetify Buttons within v-cards?

1 Answers