我有这个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>
我在这里的假设是你正在使用Vue材料,你提到的问题是关于MdIcon component的用法。
一个可行的解决方案是:
<md-icon>
包裹在锚标签中;@click
指令。例如,像这样:
<a href="#" @click="log()"><md-icon class="add-btn">add</md-icon></a>
在这里它是Codepen example,其中log
方法适当地在onClick
事件中发射,因为包裹。