Error in created hook: "TypeError: Cannot read property 'filter' of undefined" found in ---> <Hooper>

[curryhh]

Describe the bug

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. macOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 0.0.x]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 0.0.x]

Additional context Add any other context about the problem here.

[curryhh]

What's the problem?How to solve it?

[ismail9k]

This could be because there are no slides see related issues #74, if not can you please provide me with a working example, so I can help you debug this issue.

[andreassoegaard]

I solved the issue by adding some slides, as proposed by @Abdelrahman3D

[logaretm]

I tested this against #104 and it looks like it would fix it.

[curryhh]

> <template>
>     <hooper  v-if="bannerData && bannerData.length" :playSpeed="500" :itemsToShow="1.1" :centerMode="true" :infiniteScroll="true" :touchDrag="true">
>         <slide v-for="(item,index) in bannerData" :key="index">
>           <a :href="item.jump_url">
>             <img :src="item.image_url" :alt="item.title">
>           </a>
>         </slide>
>          <hooper-pagination slot="hooper-addons"></hooper-pagination>
>     </hooper>
> </template>
> 
> <script>
>   import { Hooper, Slide, Pagination as HooperPagination  } from 'hooper';
>   import 'hooper/dist/hooper.css';
>   // import {Toast} from'vant'
>   export default {
>     components: {
>       Hooper,
>       Slide,
>       HooperPagination 
>     },
>     data(){
>       return{
>         bannerData:[],
>       }
>     },
>     mounted(){
>       this.banner();
>     },
>     methods:{
>       banner(){
>         this.$api.home.banner().then(res => {
>             this.bannerData=res
>             // this.hooper.update()
>           //  console.log(this.bannerData);
>           }).catch(error =>{
>            
>             console.log('error',error)
>               //弹窗返回错误信息
>             //  Toast(error.msg);  
>         })
>       },
>     }
>   }
> </script>
> <style lang="scss" scoped>
> .hooper-slide .is-current {
>   transform: scale(1);
> }
> .hooper{
>     height: 300px;
>     width: 100%;
>     display: inline-block;
>     .hooper-slide{
>         height: 100%;
>         width: 100%;
>         padding: 5px;
>         display: inline-block;
>     }
>     
> }
> 
> </style>

[curryhh]

Now the console has no error, can't slide or play automatically