Vue.js 单击列表项中的元素不起作用-VueJS

我有这个Vue模板，我在列表项中的图标上添加了一个单击侦听器。当添加到父列表项上时，它可以工作，但在图标元素上不工作

<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>

组添加
导出默认值{
名称：“仪表板”，
方法：{
日志：函数（）{
console.log（'add'）
}
}
}

我的假设是您使用的是Vue材质，您提到的问题是有关Vue材质的使用

一个可行的解决办法是：

• 将
  包装在锚定标签中
• 绑定锚自身上的

  @click

  指令

例如，像这样：

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

---

在这里，由于包装的原因，

log

方法在

onClick

事件中正确触发。

您可以在codepen或JSFIDLE上添加工作代码吗？