vue-horizontal
vue-horizontal copied to clipboard
fuxingloh
Missing Nav
When the component was show from a hidden or display none mode, the navigation (arrow) is missing
How can we simply control the state of the visibility of the buttons? In responsive mode in the example the UI pattern is violated because there needs to be either 1) a > right arrow by default or 2) a "peek" at the next item to the right so the user knows they can scroll to the right.
Example of "peek" or whatever it needs to be called...
It's a bummer because this package, on the surface, appears to be great. But with just a small amount of digging it seems to break a lot of vue convention with regard to props and state friendliness.
BTW, wait until you have your data loaded to populate the DOM before you mount vue-horizontal or it will need to have its refresh() method run again manually at a later date.
<vue-horizontal ref="myVueHorizontal">...</vue-horizontal>
// only when you're sure data was there to render inside of vue-horizontal...
this.$refs.myVueHorizontal.refresh();
Better to just make sure the parent component has the data it needs when vue-horizontal is mounted otherwise its calculations are based on empty contents (i.e. outdated hasPrev and hasNext) hence no buttons.
Why no use MutationObserver to watch slot content? Just a thought not sure if it would work 97+% slaps tho caniuse.com/mutationobserver
Thanks @ndmgrphc, this got my arrows back. What does "wait until you have your data loaded to populate the DOM before you mount vue-horizontal" mean? Can you tell vue-horizontal to wait until some point to get its data?
@CoderTonyB I fixed it with a simple v-if on the vue-horizontal to check if the data are loaded.
@CoderTonyB I fixed it with a simple v-if on the vue-horizontal to check if the data are loaded.
Ok, so something like v-if="data.length > 0" - I'll give it a shot, thanks.
I had same issue. I must be sure if parent/child component has all data, I aplied v-if="data.length" into <vue-horizontal..., an then navigation appear.
