For example I have scenes array drawn in v-for. If I change the first element of scenes Vue will redraw each element of scenes and if those elements are objects - each field will be redrawn as well.
My v-for:
<div
class="scene"
v-for="scene of scenes"
:key="scene"
>
<p>{{scene.name}}</p>
<iframe
style="border: 0"
:src="scene.frameURL"
></iframe>
</div>
In my case each scene element contains data to load specific page with iframe and also to show it's name. And now if I change some scene's name - each another scene objects will be redrawn and iframe pages will be reloaded.
How to tell Vue to redraw only field's been changed and to not touch another fields and elements?
Related
One of my views has a component, which is only shown after data has been stored in Vuex
<MyComponent v-if="dataFetched"/>
MyComponent is a pretty straight forward component. It contains several components which in turn contain buttons.
Sometimes when the view is accessed, the buttons are not rendered correctly before mouse is hovered on top of them. Sometimes none of the buttons are visible at all, sometimes one, two or three of the buttons are shown without the text. And sometimes they are rendered perfectly. The buttons do not implement mouse over events.
I cannot reproduce this locally, but it happens quite often when the application is run on server.
One of the buttons not rendered correctly is very simple:
<template>
<span>
<base-button
v-on:click="logout()"
>{{ $t("logout") }}
</base-button>
</span>
</template>
Hopefully the video makes it clear what's happening. Sorry that the dimensions of the video are not correct.
The button which is correctly drawn in the video is part of the main component. Buttons having issues are included in sub components.
There is also some text below the buttons and the text is always rendered correctly.
I am using vue-argon design system.
I would like to create a slide + fade transition for my vue routing. Here you can see the effect I want to achieve:
https://discord.js.org/#/docs/main/stable/general/welcome
The "old" page slides to right and fades out, after that the "new" page fades in and slides to the left.
Currently I added a transition but the "new" container starts its animation before the "old" container has finished with its animation. I created a snippet to reproduce the problem:
https://codesandbox.io/s/o1jkpkl75q
What needs to get fixed to get the desired transition animation?
Try adding mode="out-in" to the transition:
<transition name="slide-fade" mode="out-in">
Updated your CodeSandbox:
When opening a Bootstrap modal (eg the GetBootstrap modal sample), the rest of the page is subtly faded out to draw attention to the modal:
How is Bootstrap accomplishing this? It seems that the class .modal-open is added to the body, but this only sets overflow: hidden. What else is Bootstrap adding/changing to cause that effect? Is the positioning of the modal within the page important?
(This is a roundabout way of asking why my modal isn't fading out the background when it's open. The code is too complicated to post, and presumably there's a flaw in my markup or CSS. If I knew how Bootstrap was accomplishing the opaque background I may be able to debug why it's not working for me.)
Bootstrap add a div and adds some classes to it. Which has black background with .5 opacity set. And add style to set height as viewport / browser screen.
<div class="modal-backdrop fade in" style="height: 984px;"></div>
If your modal is not fading out, check if you are using :
display:block!important /* notice !important */
When the modal appears, it adds a div container with the class modal-backdrop fade in before the modal-dialog container.
I'm trying to use Flexslider as a carousel for a filterable list of items. If i use the selector ".slider > .visible", Flexslider loads correctly when the page loads. However, if click on the filter controls, the elements that have the class .visible change, but flexslider doesn't display the newly filtered items and instead rotates through blank items.
Is there a way to force Flexslider to refresh the elements after it has been initialized?
I have a working Ext.List object in my Sencha Touch application. I'm rendering each item in the list using the List's itemTpl property. I'm noticing that each individual list item can be scrolled in addition to the whole list which is definitely not what I'm after.
Does anyone have any advice on how to get the individual list items not to scroll? I've tried setting the outermost div in the itemTpl template to have a specified height and overflow:hidden...but this does not prevent the scrolling behavior.
Is it the default HTML scrollbar as rendered by the browser, or is it the built-in scroll feature of Sencha Touch (the iScroller which fades in and out)? If it's the latter, try setting the scroll attribute of that ListItem object to false.
If the former, there's obviously a problem with your CSS selector. Could you share your code if it's this one?
Have you tried to set the height of the list-element, so all the content of a single list-item is visible (so you can't scroll anymore)?