如何为 Element UI 单选组的更改设置 preventDefault

Question

我正在使用元素 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
  }
}

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

Answer 1

您的方法中的参数有误。使用 @change 事件处理程序有两种方法：

一个

定义不带参数的更改处理程序，例如

<el-radio-group @change="changeHandler" v-model="radio1" ></el-radio-group>

changeHandler(e) {
   // e will be the Event object
   console.log(e)
}

B

定义带参数的更改处理程序，放入 $event 以仍然包含事件对象

<el-radio-group @change="changeHandler($event, 'string')" v-model="radio1" ></el-radio-group>

changeHandler(e, value) {
   // e will be the Event object
   console.log(e);
   
   // value will be 'string'
   console.log(value);
}

Answer 2

元素 UI 的工作方式略有不同。 @change 只是 returns 选择的值，没有别的。我们需要使用 native 来访问 Event 对象。但是 @change.native 将不起作用，因为更改已经发生（如果你想真正阻止更改）。作为旁注，我会改用 disabled 属性（如 documentation 中所示）。在我看来，对于用户体验来说，用户不能选择单选按钮是很奇怪的，但把它放在一边......如果你想阻止选择，请改用 @click.native：

@click.native="changeHandler"

那么您可以访问 Event 对象：

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

CODEPEN

如何为 Element UI 单选组的更改设置 preventDefault

How to make preventDefault for change on Element UI radio group

vue.js

element-ui

一个

B