How can I put a href property on a carousel item in Vuetify 2?

huangapple go评论63阅读模式
英文:

How can I put a href property on a carousel item in Vuetify 2?

问题

我正在使用Vuetify 2,并且需要在用户点击轮播图像时将其重定向到一个网站。轮播的每个项目都应该指向不同的网站,因此需要有多个href或类似的东西。

<v-carousel>
  <v-carousel-item
    src="https://th.bing.com/th/id/R.1f617f6c0e62cf22f8cc0db2d56c9b28?rik=%2fsedPErWt7A%2bIA&amp;riu=http%3a%2f%2f2.bp.blogspot.com%2f-rhsJGYj0RFc%2fUJ8G5i3UEHI%2fAAAAAAAAABg%2fQY0NlUG7lBI%2fs1600%2fwallpaper-praia-wallpapers%2b(13).jpg&amp;ehk=AkwUJUusgP9ImnYhvxvSQ0PSTFbjvJlKlUSeikKT%2bAQ%3d&amp;risl=&amp;pid=ImgRaw&amp;r=0"
    cover></v-carousel-item>

  <v-carousel-item src="https://th.bing.com/th/id/R.5fedcc584b436fe320057461d49f3996?rik=0iHP4CUZiAaMyQ&amp;pid=ImgRaw&amp;r=0" cover></v-carousel-item>

  <v-carousel-item src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" cover></v-carousel-item>
</v-carousel>

我尝试了API中提供的一些属性,但我不知道我是否正确编写了它们,或者它们在Vuetify 2中是否起作用。

英文:

I am working with Vuetify 2 and need to redirect the user to a website when he clicks on the image of the carousel, each item of the carousel should take to a different website, so it needs to have more than one href or something like that.

&lt;v-carousel&gt;
  &lt;v-carousel-item
    src=&quot;https://th.bing.com/th/id/R.1f617f6c0e62cf22f8cc0db2d56c9b28?rik=%2fsedPErWt7A%2bIA&amp;riu=http%3a%2f%2f2.bp.blogspot.com%2f-rhsJGYj0RFc%2fUJ8G5i3UEHI%2fAAAAAAAAABg%2fQY0NlUG7lBI%2fs1600%2fwallpaper-praia-wallpapers%2b(13).jpg&amp;ehk=AkwUJUusgP9ImnYhvxvSQ0PSTFbjvJlKlUSeikKT%2bAQ%3d&amp;risl=&amp;pid=ImgRaw&amp;r=0&quot;
    cover&gt;&lt;/v-carousel-item&gt;

  &lt;v-carousel-item src=&quot;https://th.bing.com/th/id/R.5fedcc584b436fe320057461d49f3996?rik=0iHP4CUZiAaMyQ&amp;pid=ImgRaw&amp;r=0&quot; cover&gt;&lt;/v-carousel-item&gt;

  &lt;v-carousel-item src=&quot;https://cdn.vuetifyjs.com/images/cards/sunshine.jpg&quot; cover&gt;&lt;/v-carousel-item&gt;
&lt;/v-carousel&gt;

I've tried some of the props available in the API, but I don't know if I wrote it correctly or it doesn't work in Vuetify 2

答案1

得分: 1

将每个v-carousel-item用<a>标签包裹起来。

<a href="https://stackoverflow.com/" target="_blank">
  <v-carousel-item />
</a>
英文:

Wrap each v-carousel-item with an &lt;a&gt; tag.

&lt;a href=&quot;https://stackoverflow.com/&quot; target=&quot;_blank&quot;&gt;
  &lt;v-carousel-item /&gt;
&lt;/a&gt;

huangapple
  • 本文由 发表于 2023年8月8日 22:29:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/76860528.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定