vuejs isotppe

vuejs

<template>
    <isotope ref="cpt" class="row q-col-gutter-sm" :options='options' :list="list">
        <div v-for="(item,index) in list" class="q-pt-none" v-bind:class="{ 'col-7': (index == 0 || index == 1), 'col-5': (index == 2 || index == 3) }" :key="index">
            <span hidden class="id">{{ item.id }}</span>
            <q-card rounded class="q-mb-4">
                <q-img :src="item.image" :ratio="item.ratio" />
            </q-card>
        </div>
    </isotope>
</template>

<style>
</style>

<script>
    import isotope from 'vueisotope'

    export default {
        name: 'GallerySection',
        components: {
            isotope
        },
        data () {
            return {
                tab: 'info',
                list: [
                    {
                        image: require('../assets/vietnam_hcm_1.jpg'),
                        ratio: 16 / 11,
                        id: 1
                    },
                    {
                        image: require('../assets/vietnam_hcm_2.jpg'),
                        ratio: 5 / 4.56,
                        id: 3
                    },
                    {
                        image: require('../assets/vietnam_hcm_5.jpg'),
                        ratio: 5 / 6.5,
                        id: 2
                    },
                    {
                        image: require('../assets/vietnam_hcm_8.jpg'),
                        ratio: 5 / 4.95,
                        id: 4
                    },
                ],
                options: {
                    layoutMode: 'masonry',
                    getSortData: {
                        id: "id"
                    },
                    sortBy : "id"
                }
            }
        },
        methods: {
            sort: function(key) {
                this.$refs.cpt.sort(key);
            },
            filter: function(key) {
                this.$refs.cpt.filter(key);
            },
            changeLayout: function(key) {
                this.$refs.cpt.layout(key);
            }
        }
    }
</script>