时间戳

首页 > 解决方案 > 如何为 Element UI 单选组上的更改设置 preventDefault

vue.js - 如何为 Element UI 单选组上的更改设置 preventDefault

问题描述

我正在使用 Element UI 单选按钮组，我想preventDefault()在触发更改事件时使用：

<el-radio-group @change="changeHandler" v-model="radio1">
   <el-radio-button label="New York"></el-radio-button>
   <el-radio-button label="Washington"></el-radio-button>
   <el-radio-button label="Los Angeles"></el-radio-button>
   <el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>

脚本：

methods: {
  changeHandler(value, e) { 
    // e is undefined
    // here should be preventDefault
  }
}

我尝试设置第二个参数来更改功能，但它未定义。

标签： vue.jselement-ui

解决方案

Element UI 的工作方式略有不同。@change只返回选择的值，没有别的。我们需要使用native来访问Event对象。但@change.native不会起作用，因为更改已经发生（如果您想实际阻止更改）。作为旁注，我会改用disabled属性（如文档中所述）。在我看来，对于 UX，用户无法选择单选按钮很奇怪，但将其放在一边......@click.native如果您想阻止选择，请改用：

@click.native="changeHandler"

然后您可以访问该Event对象：

changeHandler(e) { 
  console.log(e.target.value)
  if(e.target.value == "Washington") {
    e.preventDefault();
  } 
}

编解码器

推荐阅读