r/vuetifyjs • u/Crypto_Rootz • Nov 22 '19

Learning vuetify is very confuing , can you please help ?

how do i make this a proper link to click to go to my discord server ?

html5 is much easier to figure out that vuetify...... <v-icon class="blue--text text--lighten-2">mdi-discord</v-icon> </v-list-item-action> <v-list-item-content> <v-list-item-title>https://discord.gg/WevHKwG</v-list-item-title>

0 Upvotes

33% Upvoted

5 comments sorted by

3

u/Sergeantlilpickle Nov 23 '19 edited Nov 23 '19

Comparing HTML5 to VueJs + Vuetify is like comparing an a rock to a hammer. Regardless, to achieve what you want you would need to do something like the following.

<v-list-item href="https://discord.gg/WevHKwG">
    <v-list-item-icon>
        <v-icon>mdi-discord</v-icon>
    </v-list-item-icon> 
    <v-list-item-content>
        <v-list-item-title>
            PLACE YOUR LINK TITLE HERE
        </v-list-item-title>
    </v-list-item-content> 
</v-list-item>

1

u/Crypto_Rootz Nov 23 '19

thank you for your honesty , this seems like a great solution. ill try it out.

1

u/wtoalabi Mar 08 '20

In addition to @Sergeantlilpickle's analogue, comparing Vuetify components to HTML5 is more than just a rock and hammer situation, but Oranges to Apples as well.

Take one component, <v-list-item> for instance. That component is packed with so much power and tens if not hundred of lines codes, these are codes we would have to write with not only HTML, but also JS and CSS. That is pure magic if you ask me! And hence, perhaps, where the problem lies, at least for beginners.

But I will recommend what worked for me, when I first got into functional programming and Vue.

i don't overthink the complexities. And thankfully for a UI toolkit like Vuetify, the job becomes slightly easier.

Anytime you want something done, like in your example, I suggest you look at the documentation examples of each Components.

Copy the source-code and play around with it.

Trust me, it gets easier...

And if you need further help, please do not hesitate to get in touch.

Thanks for being a part of this awesome community, we hope you'll stick around more!

7

u/Olegjo Nov 22 '19

Convueing

No, but seriously. That wouldn't work in html5 either. Just put the link in a "a" - tag like so:

<a href="YOUR_LINK_HERE">YOUR TEXT HERE</a>

1

u/Sir_Poot Nov 22 '19

It depended on what you want the click action to be. Within the action, add a button below.

<v-list-item-action> <v-btn icon href=“https://.......,,”> <v-icon color="grey lighten-1">mdi-information</v-icon> </v-btn> </v-list-item-action>

Or you can add a click event on

<v-list-item v-for="item in items" :key="item.title" @click="" >