无法读取未定义的属性（读取“控制器”）Swiper vue-awesome-swiper答案

【问题标题】：Cannot read properties of undefined (reading 'controller') Swiper vue-awesome-swiper无法读取未定义的属性（读取“控制器”）Swiper vue-awesome-swiper
【发布时间】：2022-01-06 02:07:02
【问题描述】：

当我在nuxt.js中使用'Swiper'并安装'vue-awesome-swiper'时，我从官方网站复制了缩略图代码，但我一直收到错误'无法读取未定义的属性（读取'控制器' )'。找到了就改了版本，还是没解决问题

"swiper": "^7.4.1",
"vue-awesome-swiper": "^3.1.3",

mounted() {
  this.$nextTick(() => {
    console.log(this.$refs.swiperTop.swiper);
    console.log(this.$refs.swiperThumbs.swiper);
    const swiperTop = this.$refs.swiperTop.$swiper;
    const swiperThumbs = this.$refs.swiperThumbs.$swiper;
    swiperTop.controller.control = swiperThumbs;
    swiperThumbs.controller.control = swiperTop;
  });
},

【问题讨论】：

这能回答你的问题吗？ Using Swiper js with Nuxt throws dependency not found error
@kissu 谢谢，我在这个帖子中没有答案，但我刚刚在其他地方找到了解决方案。
您的问题解决了吗？随意接受它。

标签： nuxt.js swiper

【解决方案1】：

改变

const swiperTop = this.$refs.swiperTop.$swiper;
const swiperThumbs = this.$refs.swiperThumbs.$swiper;

到

const swiperTop = this.$refs.swiperTop.$el.swiper
const swiperThumbs = this.$refs.swiperThumbs.$el.swiper

【讨论】：

【解决方案2】：

"dependencies": {
    "nuxt": "^2.2.0",
    "swiper": "5",
    "vue-awesome-swiper": "^4.1.1",
}

我可以报告与 swiper 属性相同的问题。根据文档，我对计算属性使用相同的代码来获取所有参考。在开发模式下它工作正常。

computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    }

但是部署后控制台显示如下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'swiper').

所以，如上所述，我添加 $el 以解决此问题 this.$refs.mySwiper.$el.swiper 谢谢大家！

【讨论】：