[Vuejs]-How to use VueQuintable source directly?

by

0👍

✅

Due to i use the source directly, I can’t use import for the component.
So I need to put the component inside the app.js file

Vue.component('vuequintable', {
      data() {
            return {
                config: {
                    columns: [
                        {
                            headline: "Name",
                        }, {
                            headline: "Age",
                            sort:true

                        }, {
                            headline: "Birth Place",
                        }, {
                            headline: "Job",
                            sort:true
                        }
                    ],
                    multiSort:true,
                    multiSortSelect:true,
                    pageSort:true,
                    pageSortSelect:true,
                    pagination:5,
                    search:true,
                },
                sortOrder:[{
                    index:1,
                    asc:false,
                }],
                chance:[{name : "aa",
                age : 2,
                city :"hk",
                profession :"kk"
                },{name : "bb",
                age : 3,
                city :"hk",
                profession :"kk"
                }],

            }
        },
        computed:{
            rows(){

                let count = 2;
                const rows = [];

                //const chance = new Chance();
               
                for(let i = 0; i < count; i++){

                    //const randSortValue = Math.ceil(Math.random() * 10);

                    rows.push([
                        {
                            text:this.chance[i].name
                        },
                        {
                            text:this.chance[i].age
                        },
                        {
                            text:this.chance[i].city
                        },
                        {
                            text:this.chance[i].profession
                        },
                    ]);
                }

                return rows;


            }
        
    },
    template:   `<VueQuintable  :sort-order="sortOrder" :config="config" :rows="rows"></VueQuintable>`
});


Vue.config.devtools = true

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="./dist/vue-quintable.css"></link>


<div id="app">
  <vuequintable></vuequintable>
</div>

<script type="text/javascript" src="./dist/vue.min.js"></script>
<script type="text/javascript" src="./dist/vue-quintable.umd.min.js"></script>

Leave a comment