How to add an event handler to a group of elements?

Question

Vue.js

Hello

<div id = "content" class = "container">
            <brick-item
                v-for="item in itemList"
                v-bind:brick="item"
                v-bind:key="item.id"
                v-bind:id="item.id"
                v-bind:class="item.colorClass"
                v-on:click="greet"> 
            </brick-item>
            <div id = "98" class = "brick empty" v-on:click="greet"> </div>
            <div id = "99" class = "brick empty" v-on:click="greet"> </div>
        </div>

var Bricks = [];
            for (var i = 0; i < 98; i++) {
                Bricks[i] = {id: i, text: 'none', colorClass: 'empty'};
            }

            Vue.component('brick-item', {
                props: ['brick'],
                template: '<div class = "brick">{{ brick.text }}</div>'
            });

            var vm = new Vue({
                el: '#content',
                data: {
                    itemList: Bricks
                },
                greet: function () {
                    alert('Привет!');
                }
            }
            });

On divs with id 98 and 99 click works on brick-item elements there is no handler when I do this

template: '<div class = "brick"  v-on:click="greet">{{ brick.text }}</div>'

throws a reactivity error

Answer 1

https://jsfiddle.net/sxj4h3be/
1) Methods must be in the methods property of the object
2) v-on: listens to the component's own events, which are called via $emit. To listen to native, you need to add .native to get v-on:click.native="greet"