[Vuejs]-Cant use flipbook in vue js

by

1👍

i had found the problem why any image didn’t appear .
firstly, it doesn’t appear if the height and width of flipbook class is not defiend.

add a class

 <flipbook class="flipbook" :pages="pages" v-slot="flipbook">
    <button @click="flipbook.flipLeft">Previous Page</button>
    <button @click="flipbook.flipRight">Next Page</button>
 </flipbook>

then in style

.flipbook {
   width: 90vw;
   height: 90vh;
}

also slidely change the script codes as below

export default {
   name: 'App',
   data(){
     return {
        pages: [
            null,
           'images/2.jpg',
           'images/3.jpg'
            ],
         }
   },

    components: {
        flipbook 
    }
 }

now the images will appear in a flipbook

👤Abidus Sattar Aziz

Leave a comment