создавать ссылки внутрина нескольких элементах HTML - PullRequest
Новая
       9

создавать ссылки внутрина нескольких элементах HTML

0 голосов
/ 27 ноября 2018

Я использую 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 были связаны с рецептом?

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

В итоге я настроил это так: 

<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>
0 голосов
/ 27 ноября 2018

надеюсь, что это работает для вас 

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