cell.vue

<template>
    <div class="IM_cell" v-on:click="selectAd">
        <div class="IM_cell_container">
            <div v-if="showCheckbox">
                <input type="checkbox" :checked="ad.selected">
            </div>
            <div class="IM_cell_content">
                <img class="IM_cell_logo" :src="ad.large_creative_url"/>
                <div class="IM_ad_copy">{{ad.ad_copy}}</div>
            </div>
        </div>
    </div>
</template>
 <script>
     export default {
        name: "cell",
        props: ['ad', 'showCheckbox'],
        methods: {
            selectAd: function() {
                this.ad.selected = !this.ad.selected;
                 this.$emit('adSelected', {
                    ad: this.ad,
                });
            }
        }
    };
</script>
 <style>
 </style>

cellblock.vue

<template>
    <div class="IM_reset">
        <div class="IM_layout" v-for="ad in adUnit.advertisements">
            <Cell :ad="ad"
                  :showCheckbox="showCheckbox"
            />
        </div>
         <div class="IM_footer">
            <div v-if="useSelectAll">
                <button v-on:click="selectAll">select all</button>
            </div>
            <div v-if="useCompareSelected">
                <button v-on:click="compare">compare</button>
            </div>
        </div>
    </div>
</template>
 <script>
    const Cell = require('./cell.vue');
    const AdDisplayer = require('../ad_displayer/ad_displayer.js');
    const Templates = require('../../templates.js');
     export default {
        name: 'cellblock',
        components: {
            Cell
        },
        props: ['adUnit'],
        data: function () {
             const useSelectAll = Templates.supportsSelectAll(this.adUnit);
            const useCompareSelected = Templates.supportsCompareSelected(this.adUnit);
             return {
                useSelectAll,
                useCompareSelected,
                showCheckbox: useSelectAll || useCompareSelected,
            };
        },
        methods: {
            adSelected: function(e) {
                // what if a placement wants to do someting different here - open an allInOne vs cascade
                AdDisplayer.preprocessClick(this.adUnit, {
                    selectedCellIds: [e.ad.cell_id],
                });
            },
            selectAll: function() {
                const selectedAds = this.adUnit.advertisements.filter(ad => ad.selected);
                const allSelected = selectedAds.length === this.adUnit.advertisements.length;
                this.adUnit.advertisements.forEach(ad => ad.selected = !allSelected);
            },
            compare: function() {
                 const selectedAds = this.adUnit.advertisements.filter(ad => ad.selected);
                 AdDisplayer.render(this.adUnit, {
                    selectedCellIds: selectedAds.map((ad) => ad.cell_id),
                });
                 this.$emit('adsOpened', {
                    selectedAds
                });
            }
        }
    }
</script>
 <style>
 </style>

vuezor.vue

<template>
    <div class="IM_reset">
        <div class="IM_head">
            headline
        </div>
        <cellblock :adUnit="adUnit"/>
    </div>
</template>
 <script>
    const Cellblock = require('./cellblock.vue');
     export default {
        components: {
            Cellblock
        },
        props: ['adUnit'],
        on: {
            adsOpened: () => {
                console.log('hello');
            }
        }
    }
</script>
 <style>
 </style>

vuezor_placement.js

const Vue = require('vue');
const Vuezor = require('./vuezor.vue');
const map = require('im-toolkit/utils/map');
 module.exports = {
    render: (adUnit) => {
         new Vue({
            el: '#vuezorContainer',
            render: function(h) {
                return h(Vuezor, {
                    props: {
                        adUnit,
                    }
                });
            },
            data: () => ({ adUnit })
        });
         window.adUnit = adUnit;
    }
};