I am learning Vue.js, and, following a tutorial, a is used to route the page to another. He used a button wrapped by this tag, and I found that using the routing directive inside the tag.
I was wondering, what's the difference between this two ways of going from one page to another? Both of them seems to be producing the same behavior (and I am not sending or receiving any data when changing pages).
Codes for comparison:
Using v-btn
<v-btn :to="{name: 'songs-create'}"
dark medium right bottom fab absolute
class="pink" slot="action">
<v-icon>add</v-icon>
</v-btn>
Using router-link
<router-link :to="{name: 'Hello'}" tag="span" class="logo">Tab Tracker</router-link>
Thanks in advance!
v-btn is a component of vuetifyjs whereas router-link is component of vue-router.
When you use v-btn with to attribute by passing the path object, it internally uses the vue-router's router-link component's api.
So v-btn wraps the functionality of router-link when it is used with to attribute.
The reason why he could have been used the v-btn is to accomplish some other stuff like button styles and handling other events etc.
Related
I'm attempting to use the Vuetify v-list component in NuxtJS however when I deploy my app the list is not reactive at all (no hover effect, no linking).
The documentation for NuxtJS says all internal page links must use the <NuxtLink> component, but how is this possible when using pre-built components?
The NuxtLink component adds undesired styling. I'm assuming I'll need to hack away at the CSS to make it not do this?
<v-list>
<v-list-item to="/some/endpoint">
<!-- content -->
</v-list-item>
</v-list>
Linking not working after being built
Component not reactive -- no hover effect (Assume because link is not registering).
Using this should work
<v-list-item nuxt to="/some/endpoint">
As told in the documentation
Specifies the link is a nuxt-link. For use with the nuxt framework.
If you want to style the specific nuxt links, you can check this part of the documentation. Otherwise, the rest is probably Vuetify specific than can be overwritten with regular CSS.
I am getting strange behaviour when trying to dynamically update the content of a slot in Vue with Vuetify. I'm sure this is just a function of misunderstanding how slots work.
I have a slot in a custom component, like so:
<template #selectButtons="slotProps">
<v-icon #click="dropToggle(slotProps.player)"
:color="dropColor(slotProps.player)"
class="mr-5"
>
fas fa-skull-crossbones
</v-icon>
</template>
When the user clicks on the icon, it is meant to toggle the icon to different colors.
I cannot seem to get dropColor to fire on each click consistently, HOWEVER, the weird part is, if I make some change inside the <v-icon> component, like say I just add {{dropColor(slotProps.player)}} inside the v-icon tags, then all of a sudden the code will work.
But then if I do a full refresh of the page, it stops working. Then I delete that code and put it back in, then it works again!
I have tried forceUpdate and keys on the v-icon tag.
Would appreciate any help
You are trying to pass function dropColor(slotProps.player) as props. The better idea is to replace function to an object or variable and change that object/variable within method dropToggle(slotProps.player) after #click event is firing .
I have a prismic group (link_sections) containing a bunch of fields. One of the fields is a link, because the markup I am creating with these groups is supposed to contain a button that links elsewhere on the site. The problem is that I don't know how to use prismic links properly in this context because as far as I can tell it is not possible to bind the link data inside of a v-btn like so...
<v-layout v-for="(section, index) in fields.link_sections" :key="index">
<h2>{{section.header}}</h2>
<v-btn router-link :to="{{section.link}}"></v-btn>
</v-layout>
If I just render out {{section.link}} outside of the v-btn element I can render out the text value of the link successfully, but that's about as much as I can do and obviously I want to use the text as an actual link. Anyone know how I can make a link field from a prismic group work with a v-btn element?
Your syntax is wrong, try this snippet:
<v-btn :to="section.link">Link</v-btn>. Also <b-btn></v-btn> has not router-link prop. Just pass prop to. If you pass to prop, it implies that you want that button to be a <router-link>
Denotes the target route of the link.
I'm making a generic vue button component.
In some cases it would be a router-link while in other cases it would be a normal anchor tag.
So basically looking for something like this.
<template>
<router-link v-if="useRouter" :to="link"></router-link>
<a v-else :href="link"></a>
</template
But a vuejs component template must have exactly one root element.
Besides making two seperate vue components or wrapping my button in an element. I can't think of any other solution.
Is there a better way to solve this?
I'm building a single page application, using vue.js and vue-router.. right now the links work, but I want to add transition using v-transition.
but according to the documentation
What’s more important though, is that non-flow-control directives, non-prop attributes and transitions on the component element will be ignored, because there is no root element to bind them to - vue.js components
<router-view class="bounce" v-transition="bounce" transition-mode="out-in"></router-view>
so technically the v-transition in the router-view tag will be ignored because it is a Fragment instance..
so any idea where I can put the v-transition to apply transitions on route change?
Define at least one route node in your component:
<router-view class="bounce">
<div v-transition="bounce" transition-mode="out-in">
</div>
</router-view>
Vue need one element to insert in the DOM if you want to apply transition, or v-show.