I am trying to research about vue2 and wondering if there is any way that can make it easy to track if elements are visible on viewport or not so that we can do something like slide-in boxes when we scroll down the page. Any npm package or whatsoever that can be suggested? Thanks.
Currently using Vue-observe-visibility (https://github.com/Akryum/vue-observe-visibility) and have not stumbled on any issues yet.
The only thing to consider is that this only triggers when the element enters/exits the page by user scroll, not when it enters/exists because of DOM changes. Looks like it shouldn't be an issue for your use case, based on what you told about it.
Certainly check it out, it's easy to use!
vue-waypoint could be an option.
GitHub
NPM
Related
We are trying to build an music playing interface on a Vue page that plays in a bottom player as described here:
https://vuetifyjs.com/en/components/bottom-sheets/#music-player
But the playlist and other controls are in the main page. But the problem is that these elements get 'blocked' or deactivated or something, there is no way to interact with them. Just like in this example.
Input elements stop working and scrolling on the main page works only by grabbing the scrollbar on the side.
#clicks are still registered, however, and scrolling on some other components work.
I think I have tried every API setting and combination in the docs, like attaching it to different dom elements, or hide-overlay, and persistent, but nothing seems to work. The same principle seems to apply to other dialogs that take focus in vuetify.
https://vuetifyjs.com/en/api/v-bottom-sheet/
Does anyone have experience with this or know a workaround for it? It would be greatly appreciated!
This is intended behaviour. Your best bet is hide-overlay in combination with persistent
<v-bottom-sheet
hide-overlay
persistent
></v-bottom-sheet>
I face the same issue and solve that with the "retain-focus" property
try this <v-bottom-sheet :retain-focus="false"></v-bottom-sheet>
I'm on "nuxt": "2.15.4", "#nuxtjs/vuetify": "1.12.1" and "sass": "1.32.13" and have a navbar component added to my default layout that uses v-navigation-drawer and at first moment of page load there is a flicker and every thing (drawer) splashed on screen and after that css is loaded.
I have read nuxt-css-issue this and kinda understand that it's because of nuxt and vuetify behaviour . so is there any way to solve this?? It's really ugly when you load the app !!
oh btw I use nuxt universal ssr and for vuetify treeShake is true
So, you either wait for the CSS to come with the JS (better performance-wise, but may have some small flickering) or load all the CSS globally at the beginning, then the JS (less good in terms of speed, but no flicker). Do I understand the issue well?
Not sure if there is a real solution to this issue besides maybe display-hiding the component until he is loaded with a #hook:mounted hook and a v-show who is showing the component when done. More info here: https://stackoverflow.com/a/67535239/8816585
Did you found out something on Vuetify's github issues?
Not sure if there is something available yet, feel free to maybe post a new issue.
PS: there is maybe some shenanigan move here, to preload some CSS once we have reached a specific page or some hook. Not sure how would this be doable but knowing the JS ecosystem, this kind of hack may be feasable.
I have strange (at least to me) problem with multiple checkboxes with v-model. When using multiple checkboxes that are v-model'ed to one property then normal array is produced which is done with code below:
.form-check
input.form-check-input(type=“checkbox” name=“checkbox” v-model=“methodology” value=“issue tracking tool”)
label.form-check-label issue tracking tool
However, when I try to move it to Single File Component I had to copy some magical tricks from Vue.js forum to make it work. I still suspect that there must be easier way to achieve it. I can’t imagine that it wasn’t solved with simple solutions since it’s quite a common pattern (checkbox in a component - nothing exotic, right?). Any help appreciated!
Here is the working jsfiddle - please have in mind that there is no errors. I just want to know if that really has to be that complicated.
The answer is, no. You may be able to do this magic differently, but it needs to be done.
Vue has to do magic behind the scenes for checkbox because unlike all the other inputs, which have a single item that gets updated, the checkbox has to manage whether the a value is in an array. This means that the listeners and values have to be patched between the wrapper and input.
I am using the vue-masonry plugin which let me create a masonry grid easily.
I created a system of infinite loading where you scroll to the bottom of the page and it append new pictures to an array binded with the vue-masonry plugin.
The problem happen when I created a system of polling for the new pictures that were upoaded by other users. Those new pictures need to be at the top of the masonry grid.
The plugin use two Vue Directive masonry (parent) and masonryTile (element). masonryTile has a v-for which loop through the array binded with my Vue instance (which does all the heavy lifting, preloading, sanityzing, etc...).
Is there a way in the directives to know the differences between something being appended or prepended? And try to react differently (I know masonry has some append/prepend method) but in here and with this plugin, the items where already added (at the beginning so the prepend works with Vue) but there's no masonry interaction nor redraw (I tried to use the prototype to trigger the redraw this.$redrawVueMasonry();).
So I don't know what's next to do. Continue finding a way to differentiate a prepend from a append and trying to bind it to the respective masonry's methods ? Or another method that I didn't think of...
Thanks in advance for you help
Ps : I don't think my code is really relevant since It's more a way to optimize the plugin. If you want some specific part of my code anymay, tell me in the comment !
This probably comes a bit too late, this being a 10 month old question.
However vue-masonry is able to handle situations where items are spliced anywhere in the array. But to properly update the grid this.$redrawVueMasonry() should be called inside this.$nextTick() like this:
this.$nextTick(() => this.$redrawVueMasonry());
Hope this helps, if not the original poster, someone else.
I had a problem with the Masonry plugin causing to only function when the viewport is being changed, meaning the masonry boxes were invisible until you would resize the browser window. After that the boxes are not olny visible but also Masonry works as expected.
I resolved this problem by using regular CSS again for styling, and not LESS CSS anymore as I had intended.
But what would I be able to do to use both? (It doesn't seem like it's a simple 'reorder how the scripts are being loaded' kind of thing)
Funnily when I use jsFiddle and implement LESS CSS there, there is no problem. Maybe somebody can tell me what jsFiddle does to fix the issue?
https://jsfiddle.net/rcygo5fy/
code
"Solution": Since a solution would be a hassle with the code and compiling the CSS on every load is very heavy, especially client-side, the best solution is to leave LESS completely out of the end result and only use it for development but a LESS-to-CSS-rendered file for actual usage. With CSS the Masonry timing problem goes away.