Is it possible to use transition-group with pug templates?
.events-list
transition-group(name="list")
.event(v-for="(event, index) in showing" :key="event.id" :style="{'background-image': `url(${event.image.fields.file.url})`}")
Will something like this work? If so, how to create the transition effects?
Yes, it does work.
I wasnt seeing it in action because unfortunately it doesnt work with "flex" displays, once I changed to display "block" or "inline-block" it started working again.
Related
I've been working with Ionic and Vue2 for a while and I always have hard time adding ion-input tags to my code, because v-model does not work properly and I have to do all sorts of workarounds. Same is with ion-checkbox and ion-text-area. I was wondering if any of you know a way to fix this so that v-model works or do I have to just wait for Ionic team to fix this?
I made a custom element extends built-in element like <button is="my-button">. But it's not working when I use it in VueJs. Because maybe VueJs use is attribute for its components.
Is there any good solution for this?
<button is="my-button"> -> <my-button>:
Vue try to make its component. and then my button is broken.
<button is="my-button" v-pre>:
It works for button element but data binding in button is not working.
<button v-my-custom-directive="'my-button'">:
It works and it's my latest solution... But it seems ugly. I should use quotation marks for avoid undefined variable error. I don't want to suggest other people who use my element in VueJs.
Sample code: https://jsbin.com/yucojat/2/edit?html,js,output
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!
I have this accordion working using just pure css with html: https://jsfiddle.net/11wunqqz/6/
but the problem is when I tried insert it in a aurelia code did not work.
reason? I am using href='#accordion' to make it work.
First Accordion
so when I click redirects me to the age localhost/#/accordion1
someone know best way to fix it? thank you
Try to add data-toggle="collapse" and data-parent to that anchor element. It will resolve your issue.
or else remove anchor tag and add replace with span element.
I am using a jquery plugin slider pro with my vue app. There is a problem I run into when calling destroy method of this plugin so that it destroys the instance of the plugin, the html classes added by this plugin are left in the html code. I would like to refresh my v-for rendering which would then automatically clean up whatever the slider pro has added to the html markup of slides.
Is is possible to refresh v-for loop so it re-renders? If yes how? If no, is there a dirty trick I could use to accomplish this?
Try assigning a new value to the array you're using to trigger a state update:
Vue.set(yourArray, 0, yourArray[0])
You can force the Vue to re-render using $forceUpdate.