Не работает элемент внутри элемента списка - VueJS

Question

У меня есть этот шаблон Vue, в который я добавил прослушиватель щелчков на значке внутри элемента списка.Он работает при добавлении в родительский элемент списка, но не работает с элементом icon.

<template>
    <div class="dashboard-container">
        <md-drawer md-permanent="full">
            <md-list>
                <md-list-item class="header">
                    Groups <md-icon class="add-btn" @click="log()">add</md-icon>
                </md-list-item>
            </md-list>
        </md-drawer>
        <div class="content"></div>
    </div>
</template>

<script>
    export default {
        name: 'Dashboard',
        methods: {
            log: function () {
                console.log('add')
            }
        }
    }
</script>

Answer 1

Я предполагаю, что вы используете Vue Material, и проблема, о которой вы упоминаете, связана с использованием компонента MdIcon .

Жизнеспособным решением является:

• обернуть <md-icon> в тег привязки;
• привязать директиву @click к самому якору.

Например, вот так:

<a href="#" @click="log()"><md-icon class="add-btn">add</md-icon></a>

Вот пример Codepen , где метод log правильно срабатывает при событии onClick из-за переноса.