under nuxt.js i'm using vuetify. v-img works, but as i try to use the 'placeholder' feature, as described in the docs, it does not work. for the example i copy exactly the example that works in the docs.
we suppose to see a circle loader while we wait for the image.
for testing, i'm using chrome to slow down the connection.
this doesn't work. there is a blank for a few seconds, then the image appears.
here is the code. any idea?
<v-col cols="4">
<v-img :src="selectedItem.picture">
<template v-slot:placeholder>
<v-row class="fill-height ma-0" align="center" justify="center">
<v-progress-circular indeterminate color="blue"></v-progress-circular>
</v-row>
</template>
</v-img>
</v-col>
note: i'm not using vuetify-loader. could this be the issue?
Better use 'default' slot and show it while checking #error="imgLoadStatus='error'" of image.
For me, sometimes in runtime while dynamically loading and changing image, placeholder was not showing up at all.
Related
I'm making a form where user press the button and new v-card shows. Everything works but I can't make a good expand transition. It only works with the first card then it tells me to use transition-group. But when I use transition-group I don't get any animation at all. I tried a lot of things and look at the vue documentation.
I shorten the link because I get an error and SO didn't let me post it
I put an important part of my code in codepen:
https://rb.gy/gw6xws
Anyone know the solution how to make expand-transition for every added card because now it works only for the first one?
First, you should move v-for directive to v-expand-transition.
Then you can use appear to trigger the animation when you add new v-expand-transition.
<v-expand-transition appear v-for="klad in kladi" :key="klad.key">
<v-card class="pl-3 pr-3 mt-2 mb-2 rounded-lg tertiary">
<v-container>
<v-layout row wrap>
<v-flex xs12 sm6>
<p>something {{klad.key}}</p>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-expand-transition>
Example
I am creating a project in which I use "vuetify" and "vuetify-jsonschema-form". Basically, the problem is that <v-app> element takes 498 x 754.4 space, even if the child component <v–content> takes only what's necessary – 498 x 94. I have tried many suggestions – adding app property, etc. – but no progress, so I am posting here.
Code: (added both div's to indicate that I am using it in the middle of all the program (I need vuetify only in small part of the page))
...
</div>
<v-app id="vuetify_edit">
<v-container>
<v-form>
<v-jsf v-model="editModel" :schema="editSchema" />
</v-form>
</v-container>
</v-app>
<div>
...
Put <v-app> tags at the top – right inside <template> tags.
Although <v-app works in the middle of the app, it has some random height, width you can't really change.
I dont understand why v-container do not apply fluid option. It always behaves as usual container. Here is code from my App.vue
<template>
<v-app id="main" :style="{background: $vuetify.theme.themes[theme].background}">
<v-container fluid="true">
</v-container>
</v-app>
</template>
I have tried many ways like :fluid="true, or only fluid but it still acts as usual container. After inspecting page I have noticed that it seems like browser is interpretating container class before container--fluid and overlaying it's max width. as on screenshot below. Is there any way to solve this issue? I'm using firefox for inspecting.
For anyone encountering simmilar issue in future:
For learning project I've installed both boostrap-vue and vuetify. When I removed bootstrap vue dependencies container started to act as expected.
I'm really lost on this one. This is my code:
<template>
<v-container>
<v-row>
<v-col cols='12'>
<v-text-field
label="This is a label"
single-line
solo
></v-text-field>
</v-col>
</v-row>
</v-container>
</template>
If I enter text into the field on desktop it's fine. Even viewing the browser through Chrome DevTools and using the PC keyboard works. But direct entry using the phone's keyboard does not. The text just gets overlayed on the label.
What's more interesting is that it focuses properly if you type a space or punctuation and then the letters.
And yes, that's all the code I have in the file haven't even added in export defaults yet
Using nuxt v2.12.2 and #nuxtjs/vuetify v1.11.2
EDIT: I've opened a GitHub issue here. If it doesn't get answered here you can always check the issue.
In my case the problem is due to vuetify version - v2.2.22 is the last one that is working properly. For now try downgrading your packages as per instructions in here (try experimenting with different package versions): https://forum.vuejs.org/t/how-to-update-vuetify-to-latest-version-in-nuxt-js/66326
I'm attempting to add an alert (for validation purposes) inside a Vuetify date picker.... but I can't seem to get it to play nicely with the component structure from Vuetify.
My markup looks basically like this:
<v-menu>
<v-text-field><v-text-field>
<v-picker>
<v-layout row>
<v-alert>
</v-layout>
<v-picker>
<v-card-actions>
<v-btn>Cancel</v-btn>
<v-btn>OK</v-btn>
</v-card-actions>
</v-menu>
And here's a Codepen demo'ing the issue. Click the date to see my jacked-up layout: https://codepen.io/jamesfacts/pen/OrMZgx
I thought adding <v-layout row> around the alert would get me a new row inside the picker, but no soap.
I know I can fix the display by setting CSS properties specifically to the Vuetify components, but that feels like the wrong way to approach this. Is there Vuetify-y solution here or should I just force the rendered HTML to look how I want it.
Change the v-layout to be column instead of row.
Here's an updated codepen