Static GitHub Issues

[1807] Nuxt generate: Missing first item in v-for loop

prev: the $nuxt Objects mounted to window will expose the data of vuex
next: How can I access to the plugin methods in page component

Hi, I'm facing a weird issue with a nuxt generated app and a plugin I'm creating.

<template>
  <div id="app">
    <top-nav/>
    <ksvuefp :options="options" :sections="sections">
      <ksvuefp-section
        v-for="(section,index) in sections"
        :section="section"
        :key="section"
        :sectionIndex="index"
        :background-color="section"
      >
      <h2>{{ section }}</h2>
      </ksvuefp-section>
    </ksvuefp>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      sections: ['red', 'blue', 'green'],
      options: { }
    }
  }
}
</script>

When using nuxt dev no problem, everything is rendered correctly. But once generated, instead of having 3 sections mounted... I only have 2. The first one is missing. The weirdest is that on loading, this section seems to be mounted, but dieappears when the app is totally loaded...

My components code:

ksvuefp-section.vue

<template>
  <component :is="options.animationType" :options="options" :appear="false">
    <tagger :sectionIndex="sectionIndex" :options="options" class="ksvuefp-section" :style="{ backgroundImage: backgroundImage || '', backgroundColor: backgroundColor || '' }" v-show="sectionIndex === $ksvuefp.currentIndex">
      <span class="ksvuefp-section__overlay" :style="{ background: options.overlay || 'rgba(0,0,0,0.2)' }" v-if="options.overlay"></span>
      <div class="ksvuefp-section__content">
        <slot></slot>
      </div>
    </tagger>
  </component>
</template>

<script>
import { slideY, slideX, fade } from '../ksvuefp-animations'
import imagesLoaded from 'imagesloaded'
export default {
  components: {
    slideY,
    slideX,
    fade,
    'tagger': {
      props: ['options', 'sectionIndex'],
      render (h) {
        return h(this.options.sectionTag || 'div', this.$slots.default)
      },
      mounted () {
        const vm = this
        vm.$nextTick(() => {
          imagesLoaded(vm.$el, { background: true }, () => {
            vm.$ksvuefp.$emit('ksvuefp-section-loaded', vm.sectionIndex)
          })
      }
    }
  },
  data () {
    return {
      options: this.$ksvuefp.options || [ ]
    }
  },
  props: ['section', 'backgroundImage', 'backgroundColor', 'sectionIndex']
}
</script>

Any idea of what could cause the issue? I'm banging my head on the wall since hours ahaha

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This bug report is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1622">#c1622</a>)</em></sub></div>