Element UI el-card 的click点击事件无法使用（失效）解决

解决方式

<el-card shadow="always" @click="goOtherWeb('跳转地址')">
    <i class="el-icon-s-shop"></i>
    链接名字
</el-card>

改为

<el-card shadow="always" @click.native="goOtherWeb('跳转地址')">
    <i class="el-icon-s-shop"></i>
    链接名字
</el-card>

关键代码

@click 改为 @click.native

完整代码

<template>
    <div class="wrap">
        <div class="box">
            <div class="loading">
                <el-row :gutter="12">
                    <el-col :span="4" v-for="(item, key) in storeList" :key="key">
                        <el-card shadow="always" @click.native="goOtherWeb(item.address)">
                            <i class="el-icon-s-shop"></i>
                            {{ item.name }}
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'card_list',
    data() {
        return {
            storeList: []
        };
    },
    created() {
        this.getStoreList();
    },
    methods: {
        getStoreList() {
            this.$loading({
                lock: true,
                target: '.loading',
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.5)'
            });
            // 此处进行请求
            ...
            this.$loading().close();
            if (code === 200 && data) {
                this.storeList = data;
            }
        },
        /* 跳转外链*/
        goOtherWeb(url = '') {
            const that = this;
            that.$nextTick(() => {
                location.href = url;
            });
        }
    }
};
</script>

<style scoped lang="scss">
.wrap {
    width: 100%;
    height: 100%;
    background: #fff;
    .el-row {
        padding: 20px;
        .el-col {
            margin-bottom: 10px;
            .el-card {
                cursor: pointer;
            }
        }
    }
}
</style>