Как добавить обработчик событий к группе элементов?

Question

[Андрей]

Всем привет

<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('Привет!');
                }
            }
            });

На div с id 98 и 99 клик работает на элементах brick-item обработчика нет, когда делаю так

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

выдает ошибку реактивности

Answer 1

[Владимир Проскурин]

https://jsfiddle.net/sxj4h3be/

1) Методы должны быть в свойстве объекте methods
2) v-on: прослушивает собственные события компонента, которые вызываются через $emit. Чтобы прослушать нативные, нужно добавлять .native, чтобы получилось так v-on:click.native="greet"

Comments

[Андрей]

Спасибо большое

Answer 2

[0xD34F]

На div с id 98 и 99 клик работает

Да ну? Нечему там работать, вот эта штука

greet: function () {
    alert('Привет!');
}

должна находиться в methods. От которого у вас одна закрывающая скобка (wtf??!).

когда делаю так

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

выдает ошибку реактивности

Ключевой момент в сообщении об ошибке - не про реактивность, а про отсутствие у компонента метода, который вы пытаетесь установить в качестве обработчика события. Этот метод расположен в родительском компоненте, и там же вы его уже используете как обработчик клика - только он или назначен неправильно, или никак не используется внутри компонента.

Какие есть варианты исправить ситуацию:

• Слушать снаружи нативное событие, добавив соответствующий модификатор:
  
  <brick-item @click.native="greet" ...
  
  
• Эмитить событие изнутри компонента при клике по корневому элементу:
  
  <div @click="$emit('click')" ...
  
  
• Добавить корневому элементу компонента передаваемые ему слушатели событий.
  
  Можно конкретно click: <div @click="$listeners.click" ...
  А можно - всё, что есть: <div v-on="$listeners" ...