v-if is not updated when importing a 3rd party script with vue-meta

79 Views Asked by At

I want to use vue-meta to import a 3rd party SwiperJS script into my nuxt website.

The script is loaded only after mounted()-hook is called so I also initialize it on update(). This kind of works but the v-if on the wrapper does not update.

<template>
  <section
    class="swiper"
    v-if="isSwiperLoaded"
  >
    <div class="swiper-wrapper"> ... </div>
  </section>
</template>

<script>
export default {
  data() {
    return { swiperLoaded: false, swiperInitialized: false }
  },
  computed: {
    isSwiperLoaded: {
      get() {
        return this.swiperLoaded
      },
      set(value) {
        this.swiperLoaded = value
      },
    },
    isSwiperInitialized: {
      get() {
        return this.swiperInitialized
      },
      set(value) {
        this.swiperInitialized = value
      },
    },
  },
  head() {
    return {
      script: [
        {
          hid: 'swiper',
          src: 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js',
          defer: true,
          // Changed after script load
          callback: () => {
            this.isSwiperLoaded = true
          },
        },
      ],
      link: [
        {
          rel: 'stylesheet',
          type: 'text/css',
          href: 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css',
        },
      ],
    }
  },
  methods: {
    initSwiper() {
      const swiperOptions = {
        ...
      }

      let swiper = new Swiper(this.$el, swiperOptions)
    },
  },
  mounted() {
    if (!this.isSwiperInitialized && this.isSwiperLoaded) {
      console.log('INIT LOADED')
      this.initSwiper()
      this.isSwiperInitialized = true
    }
  },
  updated() {
    if (!this.isSwiperInitialized && this.isSwiperLoaded) {
      console.log('UPD LOADED')
      this.initSwiper()
      this.isSwiperInitialized = true
    }
  },
}
</script>

Also I noticed the computed values are normally for getting and setting values from store and not local values. Maybe there is an easier way of updating the variables.

0

There are 0 best solutions below