[Vuejs]-Create links inside <router-link> on multiple html elements

by

0👍

hope it works for you

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

0👍

i ended up setting it like this:

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

Leave a comment