Question

我正在使用Vuetify并创建多个样式的v-card，每张卡片都应包含指向目标的链接，但只能单击该卡片的内部标题或图像。问题是我要遍历对象数组，并用v-card包装每个<router-link>，以便整个卡片都可单击。这是代码：

<router-link v-for="recipe in recipes" :key="recipe.title" :to="{path: `recipe/${recipe.title}`}">
  <v-card>
      <v-img :src="require('../assets/foodpic.jpg')" aspect-ratio="2.75"></v-img>

      <v-card-title primary-title>
          <div>
              <h3 class="headline mb-0">{{ recipe.title }}</h3>
          </div>
      </v-card-title>

      <v-card-actions>
          <v-btn flat color="orange" disabled>Share</v-btn>
          <v-btn flat color="orange">Explore</v-btn>
      </v-card-actions>
  </v-card>
</router-link>

我找到了一种使用tags将路由器链接附加到特定元素的方法，但这只允许我连接单个html元素，在这里我想在多个元素上使用相同的链接。知道如何修改此代码，以便仅将v-img和v-card-title链接到配方吗？

Answer 1

希望它对您有用

 <v-card v-for="recipe in recipes" :key="recipe.title">
      <v-img :src="require('../assets/foodpic.jpg')" aspect-ratio="2.75" 
      :to="{path: `recipe/${recipe.title}`}"></v-img>


      <v-card-title primary-title :to="{path: `recipe/${recipe.title}`}">
          <div>
              <h3 class="headline mb-0">{{ recipe.title }}</h3>
          </div>
      </v-card-title>

      <v-card-actions>
          <v-btn flat color="orange" disabled>Share</v-btn>
          <v-btn flat color="orange">Explore</v-btn>
      </v-card-actions>
  </v-card>

Answer 2

我最终是这样设置的：

<v-card v-for="recipe in recipes" :key="recipe.title">
    <router-link :to="{path: `recipe/${recipe.title}`}">
        <v-img :src="require('../assets/foodpic.jpg')" aspect-ratio="2.75"></v-img>
    </router-link>
    <v-card-title primary-title>
        <div>
            <router-link :to="{path: `recipe/${recipe.title}`}">
                {{ recipe.title }}
            </router-link>
        </div>
    </v-card-title>

    <v-card-actions>
        <v-btn flat color="orange" disabled>Share</v-btn>
        <v-btn flat color="orange">Explore</v-btn>
    </v-card-actions>
</v-card>

在多个html元素的<router-link>内部创建链接

2 个答案: