时间戳

首页 > 解决方案 > 向 v-card 中的 Vuetify 按钮添加路由？

vue.js - 向 v-card 中的 Vuetify 按钮添加路由？

问题描述

这应该是一个简单的修复，但不知道从哪里开始。

我有..

<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>

然后，我在数组中有这些卡片的图像和“标题”数据。我有大约 8 张卡片，每张卡片代表自己的“类别”，由数组中的“标题”数据表示。

我想要做的是，如果我点击类别/标题为“手枪”的卡片或点击卡片“步枪”，我将被引导到一个新页面，在那里我列出了该特定类别的项目..但是我不确定从哪里开始，因为我只是将 {{weapon.WeaponType}} 传递给 1 个卡片对象，然后在所有卡片上使用 1 个按钮（带有文本“查看武器”）。

我的理解是，如果我为我制作的 1 按钮制作路线，那么所有按钮的路线都是相同的，尽管卡片代表自己的类别，这很糟糕，因为我不想看到“手枪”当我单击“shotgun”卡的按钮时。

我想以某种方式保持我当前的结构（使用 1 个对象并传递一个数据循环）和 1 个 btn，以便我的代码保持相同的长度/结构）。

谢谢阅读。

标签： vue.jsvuetify.js

解决方案

您将需要对象中的其他属性 - 对于按钮的路线：

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

weapon.route可以是字符串或对象。

另一种选择是仅提供类别 ID，然后

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

推荐阅读