如何解决组件中未定义的渲染功能或模板:刷卡器
我正在swiper
中使用nuxt.js
。我从他们的文档中尝试了该示例,但出现错误:
<template>
<swiper
:slides-per-view="3"
:space-between="50"
navigation
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
...
</swiper>
</template>
<script>
// import Swiper core and required components
import SwiperCore,{ Navigation,Pagination,Scrollbar,A11y } from 'swiper';
// Import Swiper Vue.js components
import { Swiper,SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';
// install Swiper components
SwiperCore.use([Navigation,A11y]);
// Import Swiper styles
export default {
components: {
Swiper,SwiperSlide,},methods: {
onSwiper(swiper) {
console.log(swiper)
},onSlideChange() {
console.log('slide change')
},};
</script>
解决方法
Swiper docs状态:
滑动Vue.js组件仅与新的Vue.js版本3兼容。
Nuxt 2.x当前使用Vue 2,这会导致您提到的错误。一种解决方法是将Swiper的API与HTML结合使用,如以下组件所示:
get()
,
如果您使用的是较新版本的nuxtjs,请将容器包装在<client-only></client-only>
中。将<no-ssr></no-ssr>
用于旧版本
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。