Load dynamic data into vue-flickity and Firefox bug

[juanbrujo]

This is not a bug, but a solution after 2 days trying to fix this thing.

Using this component and axios, I retrieve data, use v-for and refresh vue-flickity but I had problems rebuilding the carousel. Also, getting that data and using created () exploded in Firefox and coudn`t create the carousel.

Solution:

axios(
    {
      method: .....m
      url: ....,
      data: ....
    })
    .then(response => {
      if (response && response.status === 200) {
        this.myData = response.data // this will be used in v-for inside flickity
      } else {
        // raven....
      }
    })
    .then(response => {
      this.$nextTick(function () { // the magic
        this.$refs.flickity.rerender()
      })
    })
    .catch((error) => {
      // raven
    })

<flickity ref="flickity" :options="myOptions">
  <div class="carousel-cell" v-for="item in myData" :key="item.id">
      <span class="name">{{ item.names }} {{ item.father_surname }}</span>
  </div>
</flickity>

[jian11231]

I have same problem with you, but after i try the solution above, the error of " Cannot read property 'rerender' of undefined" was returned

[juanbrujo]

@jian11231 you must have a referer, see ref="flickity" in the component and this.$refs.flickity.rerender()

[aghouseh]

I'm not seeing any reactive updates to the slider contents. It works on page load but as soon as I update the content of the slider, the parent component node is empty.

      <Flickity ref="flickity" :options="flickityOptions">
        <div v-for="image in images" :key="image" class="QuickBuy-image">
          <img :src="image" />
        </div>
      </Flickity>

[juanbrujo]

@aghouseh the :key in a loop in Vue usually receives and int (unique id), so try with:

<div v-for="image in images" :key="image.id" class="QuickBuy-image">
  <img :src="image" />
</div>

[yeyuguo]

1. 先移除旧实例
2. 再重新获取数据【重新渲染】

[awatertrevi]

I'm not seeing any reactive updates to the slider contents. It works on page load but as soon as I update the content of the slider, the parent component node is empty.

      <Flickity ref="flickity" :options="flickityOptions">
        <div v-for="image in images" :key="image" class="QuickBuy-image">
          <img :src="image" />
        </div>
      </Flickity>

Same here. Did you manage to find a fix?