I am studying a project that uses a lot of Vuetify and v-card components. One such component is <v-card-subtitle> which is used like this-
<v-card-subtitle :title="display.content">
Hello World
</v-card-subtitle>
When I hover over v-card-subtitle, :title displays a small popup, I want to style this popup but it looks like an inherent Vuetify property, maybe?
What is :title and how does it work? Is anyone familiar with this? I can't find this in the documentation.
I want to style :title specifically, not the v-card-subtitle. I've tried the following ways-
Wrapping the title in a span and div
Adding addition classes or subclasses
But, no such luck.
Oh, that's just the regular HTML title attribute bound to a variable by Vue. Vue can bind variables to any HTML attribute using v-bind or the shorthand : syntax, not just component props.
Note that if an attribute is not bound by a component, it is pushed down to the component's root element. Vue calls this Fallthough Attributes.
So your v-card-subtitle renders a div with a HTML title attribute, set to the value in display.content. And yes, native titles cannot be styled.
But you could replace them with Vuetify's v-tooltip. Those you can style, change placement, and they overall fit nicely with other Vuetify components.
Related
I need to know how can I add a class to "template" tag in vue.
<template
#popover
class: templateClass // Is it possible to add a class in here?
>
<router-link
v-close-popover
to="/somewhere"
>
Go to the page
</router-link>
</template>
You can't bind any classes to the template tag as the template tag itself does not render an element for itself.
What you're trying to achieve is not possible despite the comments made on the contrary.
There's a reason why Vue2 needs a root element for it's components.
Adding #templateRef to the template-tag is just a shorthand for v-slot (see What do the hash marks (#) mean in Vue?) and does basically nothing for you in this case.
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.
To make code more simple/clean for me and my designers, I'd like to be able to do something like below. Is it possible - using a custom directive or render function to implement this with a simple attribute?
This would really help separating animation from structure and functionality, which I think could be helpful in many cases. I figure render functions can easily wrap an element with other HTML elements, but can they wrap elements (or components) with custom Vue transitions?
This:
<template>
<my-component custom-transition></mycomponent>
</template>
Becomes this:
<template>
<custom-transition>
<my-component></mycomponent>
</custom-transition>
</template>
Or maybe bring it up on Github?
Thanks!
A Vue forum member provided a great solution for me in this thread using dynamic components. Happy!
In the Vue documentation, I have seen opening and closing tags, but I've seen in other places where authors write components as self closing tags, like <some-component />
Is the practice of self-closing tags legal in Vue?
From the Vue style guide:
Components with no content should be self-closing in single-file
components, string templates, and JSX - but never in DOM templates.
It's legal and strongly recommended by the Vue style guide:
Vue Style Guide #self-closing components
Both the questions are answered above. But, I would like to point out what exactly is meant by no content in self closing tags.
When we use <div><p>Something</p></div>, <p> tag here is the content and hence, we cannot use div as a self closing tag.
Similarly in case of Vue JS components, you can also include content inside the component tags. e.g., <MyComponent><p>Something Else</p></MyComponent>.
Then, in the component definition of <MyComponent>, you have to includes to render the content passed wherever <MyComponent> is used.
If you intend to not have any content to be passed from the <MyComponent>. i.e. If you do not have the <slot> tag in the definition of your component, then your <MyComponent> can be a self closing tag.
When i use the style tag on a component, and then view the generated code in the browser, i end up with a style tag for every component used.
Is there a way around this?
What is considered best practice with vue and css?