Vue使用ElementUI的el-dropdown点击事件问题

最新推荐文章于 2024-07-04 08:43:07 发布

原创最新推荐文章于 2024-07-04 08:43:07 发布 · 1w 阅读

18 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #elementui

本文介绍了在使用Vue和ElementUI时遇到的el-dropdown点击事件无法触发的问题，详细阐述了问题的重述、解决过程以及后续的解决方案。通过将@click改为@click.native成功实现了点击事件。

Vue使用ElementUI的el-dropdown点击事件问题

el-dropdown介绍
问题重述
问题解决
后续

el-dropdown介绍

el-dropdown是ElementUI提供的响应式的实现下拉菜单的功能组件。详细用法可见官方说明文档：https://element.eleme.cn/#/zh-CN/component/dropdown

问题重述

我在实现下拉菜单的时候，在el-dropdown-item添加点击事件发现定义的事件无法被正常触发。
下面是我的代码：

<el-dropdown>
	<span class="el-dropdown-link">
		{{value1}}<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu  slot="dropdown">
    	<el-dropdown-item  v-for="(item) in option1" :key="item.value" @click="changeValue1(item.label)">
        	<span> {{ item.label }}</span>
        </el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>
            


<script>
export default {
name: "top",
  data(){
    return{
      value1: "兰州",
      option1: [
        { label: '兰州', value: 0 },
        { label: '北京', value: 1 },
        { label: '上海', value: 2 },
      ],
    }
  },
  methods:{
    changeValue1:function (text){
      console.log("先前"+this.value1)
      this.value1 = text;
      console.log("之后"+this.value1)
    },
  },
}
</script>

问题解决

多次检查代码后无果，于是重新查看官方文档，发现了这样一个东西。

事件名称	说明	回调参数
command	点击菜单项触发的事件回调	dropdown-item 的指令

意思是说，当我点击下拉菜单某一项时，返回一个dropdown-item的带参指令，这不就是我想要的点击事件,于是开始动手:

修改前代码：

<el-dropdown>
            <span class="el-dropdown-link">
              {{value1}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
          <el-dropdown-menu  slot="dropdown">
            <el-dropdown-item  v-for="(item) in option1" :key="item.value" @click="changeValue1(item.label)">
            	<span> {{ item.label }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
 </el-dropdown>


<script>
export default {
name: "top",
  data(){
    return{
      value1: "兰州",
      option1: [
        { label: '兰州', value: 0 },
        { label: '北京', value: 1 },
        { label: '上海', value: 2 },
      ],
    }
  },
  methods:{
    changeValue1:function (text){
      console.log("先前"+this.value1)
      this.value1 = text;
      console.log("之后"+this.value1)
    },
  },
}
</script>

修改后代码：

<el-dropdown @command="changeValue1">
            <span class="el-dropdown-link">
              {{value1}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
          <el-dropdown-menu  slot="dropdown">
            <el-dropdown-item  v-for="(item) in option1" :key="item.value" :command="item.label"><span> {{ item.label }}</span></el-dropdown-item>
          </el-dropdown-menu>
</el-dropdown>


<script>
export default {
name: "top",
  data(){
    return{
      value1: "兰州",
      option1: [
        { label: '兰州', value: 0 },
        { label: '北京', value: 1 },
        { label: '上海', value: 2 },
      ],
    }
  },
  methods:{
    changeValue1:function (text){
      console.log("先前"+this.value1)
      this.value1 = text;
      console.log("之后"+this.value1)
    },
  },
}
</script>

结果和我预想的一样，点击事件实现了。