关于iview下拉菜单无法添加点击事件的解决办法
效果如下图所示,点击下拉菜单,点击退出,然后跳到登录界面

代码如下:
<Dropdown trigger="click" style="margin-left: 20px;">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
<DropdownMenu slot="list">
<DropdownItem @click="isAdminModal = true">修改密码</DropdownItem>
<DropdownItem @click="logOut" divided>退出</DropdownItem>
</DropdownMenu>
</Dropdown>
方法如下:
logOut() {
this.$axios.get("api/api/netflow/v1/xky/logout")
.then(res => {
console.log(res)
const code = res.data.code
// console.log(code)
if(code == '0000'){
this.$Notice.success({
desc: '登出成功!'
})
this.$router.push('/')
}
else {
this.$Notice.error({
title: '登出失败',
desc: res.data.errMsg
})
}
})
.catch( error => {
console.log(error.response)
console.log(error.message)
this.$Notice.error({
desc: '登出失败!'
})
})
},
然后没有打印????postman也测试通过了,那是为啥
最后发现还是iview的坑啊,哭了,文档里写着点击事件,还有on-click都试了,没用,最后才知道需要加个修饰符.native,真的崩溃
如下:
<DropdownItem @click.native="isAdminModal = true">修改密码</DropdownItem>
<DropdownItem @click.native="logOut" divided>退出</DropdownItem>
问题解决,res也能正常返回了
关于iview下拉菜单无法添加点击事件的解决办法的更多相关文章
- 谈谈如何给下拉框option添加点击事件?
我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...
- jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身)
jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...
- jquery无法为动态生成的元素添加点击事件的解决方法
遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...
- layui的select下拉框太长被遮挡了的解决办法
layui的select下拉框太长采用滚动条的形式出现,可以给select的dl加一个最大高度,具体的效果如下图 .layui-form-select dl { max-height:160px; }
- 为所有的Ul下的li标签添加点击事件
- SpinnerViewPop【PopWindow样式(单选)、Dialog样式(单选+多选)的下拉菜单】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对下拉菜单的文本区域和列表区域进行了封装.包括两种展现方式:popwindow(单选).dialog(单选+多选) 因为该封装需要在 ...
- 黄聪:TinyMCE 4 增强 添加样式、按钮、字体、下拉菜单和弹出式窗口
我最喜欢 WordPress 3.9 的更新是使用了 TinyMCE 4.0 编辑器.新的 TinyMCE 看起来看起来更整洁(真正匹配WP仪表板),它有一些非常不错的附加功能.我的很多老主题和插件必 ...
- Bootstrap3系列:下拉菜单
1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...
- 从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中
1,实现功能:从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中 并实现app向后移动一个元素的位置: 2.实现思路: 01.遍历下拉菜单,添加拖拽方法,实现位置移动功能: 02.遍历app列 ...
随机推荐
- flutter Form表单
import 'package:flutter/material.dart'; class FormDemo extends StatelessWidget { @override Widget bu ...
- 有些lambda表达式就可以体现出编程中「Context(上下文)」环境
编程中什么是「Context(上下文)」? 每一段程序都有很多外部变量.只有像Add这种简单的函数才是没有外部变量的.一旦你的一段程序有了外部变量,这段程序就不完整,不能独立运行.你为了使他们运行 ...
- sql中去除重复的数据 select distinct * from table
总的思路就是先找出表中重复数据中的一条数据,插入临时表中,删除所有的重复数据,然后再将临时表中的数据插入表中.所以重点是如何找出重复数据中的一条数据,有三种情况 1.重复数据完全一样,使用distin ...
- 零基础学Python-第二章 :Python基础语法-05.基础数据类型
打开终端,输入python3,这就进入了python的命令提示符. 输入type(8),返回的是int类型.用来type来判断当前的是什么类型. 字符串8转int类型. 数字123转字符串 布尔类型的 ...
- Spring cloud微服务安全实战-3-1 API安全 常见的安全机制
不考虑微服务这种复杂的环境下,只是写一个简单的api的时候,如何来保证api的安全. 什么是API
- hdu 2018 母牛的故事 动态规划入门题
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2018 设 f[i][j] 表示第i天年龄为j的母牛个数,其中j=4代表所有年龄达到4岁的成年母牛,则: ...
- 【Leetcode_easy】874. Walking Robot Simulation
problem 874. Walking Robot Simulation solution1: 思路:1)如何表示移动的方向以及移动的位置坐标; 2)障碍物坐标如何检查;3)求解的是最大距离; cl ...
- Node.js学习笔记(4):Yarn简明教程
Node.js学习笔记(4):Yarn简明教程. 引入Yarn NPM是常用的包管理工具,现在我们引入是新一代的包管理工具Yarn.其具有快速.安全.可靠的特点. 安装方式 使用npm工具安装yarn ...
- vue引入iconfont报错
参考链接:https://blog.csdn.net/weixin_37215881/article/details/89237213
- Centos7.5 添加环境变量并生效
配置环境变量用户 jiangshan为例(base) [jiangshan@localhost ~]$ export PATH=$PATH:/usr/local/MATLAB/R2014a/bin/( ...