使用vue-meta引入第三方脚本时v-if未更新的问题

问题场景 #

在Nuxt项目中通过vue-meta引入第三方SwiperJS脚本，脚本加载完成后才初始化Swiper，同时用v-if控制容器显示，但目前v-if未正常更新；另外当前用计算属性处理本地状态变量，觉得有更简便的实现方式。

原代码如下：

<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>

优化方案 #

1. 移除冗余计算属性 #

直接操作data里的原始变量swiperLoaded和swiperInitialized即可，没必要用计算属性做中转，简化代码结构。

2. 修复v-if更新问题 #

脚本加载的callback中直接修改data变量，Vue响应式系统会自动触发视图更新；同时给容器添加ref，替代this.$el更可靠。

3. 精准控制初始化时机 #

不需要在mounted和updated中重复判断，直接在脚本加载回调里触发初始化，搭配watch监听变量变化做兜底，避免DOM未渲染完成的情况。

修改后的完整代码：

<template>
  <section
    class="swiper"
    v-if="swiperLoaded"
    ref="swiperContainer"
  >
    <div class="swiper-wrapper"> ... </div>
  </section>
</template>

<script>
export default {
  data() {
    return { 
      swiperLoaded: false, 
      swiperInitialized: false,
      swiperInstance: null // 保存实例方便后续操作
    }
  },
  head() {
    return {
      script: [
        {
          hid: 'swiper',
          src: 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js',
          defer: true,
          callback: () => {
            this.swiperLoaded = true
            this.initSwiper()
          },
        },
      ],
      link: [
        {
          rel: 'stylesheet',
          type: 'text/css',
          href: 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css',
        },
      ],
    }
  },
  watch: {
    swiperLoaded(newVal) {
      // 兜底监听，确保DOM渲染完成后初始化
      if (newVal && !this.swiperInitialized) {
        this.initSwiper()
      }
    }
  },
  methods: {
    initSwiper() {
      // 防止重复初始化或容器未挂载
      if (this.swiperInitialized || !this.$refs.swiperContainer) return
      
      const swiperOptions = {
        // 你的Swiper配置项
      }

      this.swiperInstance = new Swiper(this.$refs.swiperContainer, swiperOptions)
      this.swiperInitialized = true
    },
  },
}
</script>

关键说明 #

• 用ref获取容器元素比this.$el更可靠，适配组件嵌套、多元素场景。
• 保存Swiper实例到data中，方便后续做滑动控制、配置更新等操作。
• 移除冗余计算属性，直接操作data变量，符合Vue响应式最佳实践。

内容的提问来源于stack exchange，提问作者Dollique