Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error with v-for #2

Closed
angelorc opened this issue Jan 21, 2017 · 13 comments
Closed

Error with v-for #2

angelorc opened this issue Jan 21, 2017 · 13 comments

Comments

@angelorc
Copy link

Hello,
I tried the component, but if I try to add v-for the elments gona be outside the view port

<div class="carousel-cell col-xs-6 col-md-3" v-for="package in packages">
           <button class="block-size unbuttonized" :class="{ 'active': package.active }">
                <div class="pricing">
                    <div class="price">
                        <span class="symbol">{{ package.currency }} </span>
                        <span class="cost">{{ package.price }}</span>
                        <span class="period">{{ package.periodText }}</span>
                    </div>
                    <div class="price old">
                        <span class="cost">{{ package.currency }} {{ package.price_old }}</span>
                        <span class="period">{{ package.price.periodText }}</span>
                    </div>
                </div>
                <div class="details">
                    <span v-for="feature in package.features" v-html="feature.name"></span>
                </div>
            </button>
        </div>

Rendering:

<div class="main-carousel flickity-enabled is-draggable" tabindex="0">
  <div class="flickity-viewport" style="height: 0px;">
    <div class="flickity-slider" style="left: 0px;"></div>
  </div>
  <button class="flickity-prev-next-button previous" type="button" disabled="" aria-label="previous"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow"></path></svg></button><button class="flickity-prev-next-button next" type="button" disabled="" aria-label="next"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg></button><ol class="flickity-page-dots"></ol><div class="carousel-cell col-xs-6 col-md-3"><button class="block-size unbuttonized"><div class="pricing"><div class="price"><span class="symbol"></span> <span class="cost">3.90</span> <span class="period">/mo</span></div> <div class="price old"><span class="cost">€ 7.90</span> <span class="period"></span></div></div> <div class="details"><span>Dominio <strong>Incluso</strong></span><span>Spazio Web da <strong>10GB</strong></span><span>Traffico mensile <strong>Illimitato</strong></span><span>Database MySQL <strong>Illimitati</strong></span></div></button></div><div class="carousel-cell col-xs-6 col-md-3"><button class="block-size unbuttonized"><div class="pricing"><div class="price"><span class="symbol"></span> <span class="cost">7.90</span> <span class="period">/mo</span></div> <div class="price old"><span class="cost">€ 12.90</span> <span class="period"></span></div></div> <div class="details"><span>Dominio <strong>Incluso</strong></span><span>Spazio Web da <strong>20GB</strong></span><span>Domini aggiuntivi <strong>Illimitati</strong></span><span>Traffico mensile <strong>Illimitato</strong></span><span>Database MySQL <strong>Illimitati</strong></span></div></button></div><div class="carousel-cell col-xs-6 col-md-3"><button class="block-size unbuttonized"><div class="pricing"><div class="price"><span class="symbol"></span> <span class="cost">11.90</span> <span class="period">/mo</span></div> <div class="price old"><span class="cost">€ 23.90</span> <span class="period"></span></div></div> <div class="details"><span>Dominio <strong>Incluso</strong></span><span>Spazio Web da <strong>30GB</strong></span><span>Domini aggiuntivi <strong>Illimitati</strong></span><span>Traffico mensile <strong>Illimitato</strong></span><span>Database MySQL <strong>Illimitati</strong></span></div></button></div>
</div>
@drewjbartlett
Copy link
Owner

Could you provide some more details on this? I'm not totally sure what you mean.

@brettgullan
Copy link

brettgullan commented Feb 24, 2017

I'm having the same issue. If I try to generate the carousel-cell elements using a v-for binding, they are rendered outside the Flickity wrapper.

@angelorc
Copy link
Author

same here... it re-render outside

@drewjbartlett
Copy link
Owner

Hmmm, I'll look into this. @brettgullan could you give me a code sample as well?

@brettgullan
Copy link

Hey @drewjbartlett Sorry, false alarm! Found the issue with my code. All good.

@drewjbartlett
Copy link
Owner

Oh good! Closing this for now then!

@lukaszflorczak
Copy link

lukaszflorczak commented May 19, 2017

Hi. I have the same issue. I use v-for and my slides are outside of the flickity wrapper. I have installed vue-flickity and flickity.

Fragment of my code:

<flickity ref="flickity" class="carousel" :options="flickityOptions">
    <div class="carousel-cell" v-for="(item, index) in slides" :key="index">
        {{ item.title }}
    </div>
</flickity>
import Flickity from 'vue-flickity'

export default {
    components: {
        Flickity
    },

    data () {
        return {
            flickityOptions: {
                prevNextButtons: false,
                pageDots: false,
                wrapAround: true
            }
        }
    }
}

Generated code:

<div class tabindex="0">
    <div class="flickity-viewport" style="height: 0px;">
        <div class="flickity-slider" style="left: 0px;">
    </div>
    <div class="carousel-cell">...</div>
    <div class="carousel-cell">...</div>
</div>

@liquidvisual
Copy link

liquidvisual commented Nov 1, 2017

@lukaszflorczak Yep, I'm having the exact same issue.

@brettgullan Can you please tell us how you solved this?

@alexbudure
Copy link

+1 Flickity initializes before the loop ends

@exxy
Copy link

exxy commented Dec 19, 2017

@alexbudure is correct

You can remedy this issue by using a v-if to delay the rendering of the Flickity component until your data is available.

Example:

<flickity v-if="Object.keys(slides).length > 0" ref="flickity" class="carousel" :options="flickityOptions">
    <div class="carousel-cell" v-for="(item, index) in slides" :key="index">
        {{ item.title }}
    </div>
</flickity>

@SherAtrium
Copy link

@alexbudure is correct

You can remedy this issue by using a v-if to delay the rendering of the Flickity component until your data is available.

Example:

<flickity v-if="Object.keys(slides).length > 0" ref="flickity" class="carousel" :options="flickityOptions">
    <div class="carousel-cell" v-for="(item, index) in slides" :key="index">
        {{ item.title }}
    </div>
</flickity>

Wow thanks dude. You saved me. )))

@jakedowns
Copy link

downside of using v-if to solve this, is that it breaks the this.$refs.flickity :<

@semihkeskindev
Copy link

@alexbudure is correct

You can remedy this issue by using a v-if to delay the rendering of the Flickity component until your data is available.

Example:

<flickity v-if="Object.keys(slides).length > 0" ref="flickity" class="carousel" :options="flickityOptions">
    <div class="carousel-cell" v-for="(item, index) in slides" :key="index">
        {{ item.title }}
    </div>
</flickity>

I was working on it for 3 hours to figure it out why act like this... Thank you so much 🙏 It worked for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants