Question

这应该是一个简单的解决方法，但不确定从哪里开始。

我有..

<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张卡，每张卡代表自己的“类别”，由我数组中的“ title”数据表示。

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

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

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

感谢阅读。

Answer 1

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

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

要将路线添加到V卡中的Vuetify按钮？

1 个答案: