self.$setState and swiper: image refresh not working properly for first loaded slide

1

I am using self.$setState to change the state of a initial var that is null for a page that use a swiper slider…

the swiper slider must be loaded after the state of the var is changed and has its data…

the issue: the swiper slider for the first slider is not refresh and need to swipe to second slide for the image to be loaded…

I tried observer: true and everything tor refresh swiper slider and nothing seems to work…

initial value of upcoming_events

  data: function() {
    // Must return an object
    return {
      upcoming_events: null,
    }
  },

I then load via app.request the Json and apply the content to upcoming_events

        app.request({
...
          url: 'asset/jsons/upcoming_events.json',
....
          success: function(_upcoming_events) {
            console.log(_upcoming_events);

            setTimeout(function() {
              self.$setState({
                upcoming_events: _upcoming_events,
              });
            }, 100);
...

then in the html page I have this:


        {{#if upcoming_events}}

          {{#if upcoming_events.length}}

            {{#each upcoming_events}}

              <div data-pagination='{"el": ".swiper-pagination"}' data-navigation='{"nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev"}'
                data-lazy='{"enabled": true, "loadPrevNext": true, "loadPrevNextAmount": 2}'
                class="swiper-container events swiper-init swiper-lazy" data-space-between="0"
                data-observer="true" data-slides-per-view="1" data-slide-to-clicked-slide="true"
                data-loop="false">
                <div class="swiper-wrapper events">
                  {{#each images}}
                    <div class="swiper-slide swiper-lazy ease with-gradient" data-background="{{url}}">
                      <div class="preloader swiper-lazy-preloader"></div>
                    </div>
                  {{/each}}
                </div>
              </div>

            {{/each}}


          {{else}}

            <div class="block">

              <div class="row">
                <div class="col-100 si-20">
                  no information yet
                </div>
              </div>

            </div>

          {{/if}}

        {{else}}

        <div data-pagination='{"el": ".swiper-pagination"}' data-navigation='{"nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev"}'
          data-lazy='{"enabled": true, "loadPrevNext": true, "loadPrevNextAmount": 2}'
          class="swiper-container swiper-init swiper-lazy" data-space-between="0"
          data-observer="true" data-slides-per-view="1" data-slide-to-clicked-slide="true"
          data-loop="false">

          <div class="swiper-wrapper events">
              <div class="swiper-slide ease ">


                <div class="block">

                  <div class="progress">
                    <div class="indeterminate skeleton-screen">loading data please wait...</div>
                  </div>

                </div>

              </div>

          </div>
        </div>


        {{/if}}

the data is loaded and the swiper slider is shown but first item does not load image unless I swipe to the next slide or swipe the slide card… then the image is loaded…

:frowning:

also in the console I see this error:

TypeError: undefined is not an object (evaluating 't.push')

any solution? any tips? thanks