Question

我有这个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>

Answer 1

我在这里的假设是您正在使用Vue材质，而您提到的问题与MdIcon component的使用有关。

可行的解决方案是：

将<md-icon>包裹在定位标记中；
在锚点本身上绑定@click指令。

例如，像这样：

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

这里是Codepen example，log方法由于包装而在onClick事件中正确触发。

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

1 个答案: