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

问题描述 投票:0回答:1

我有这个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.js vuejs2
1个回答
2
投票

我在这里的假设是你正在使用Vue材料,你提到的问题是关于MdIcon component的用法。

一个可行的解决方案是:

  • <md-icon>包裹在锚标签中;
  • 在锚本身上绑定@click指令。

例如,像这样:

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

在这里它是Codepen example,其中log方法适当地在onClick事件中发射,因为包裹。

© www.soinside.com 2019 - 2024. All rights reserved.