Как сделать protectDefault для изменений в группе радиоэлементов Element

Question

Я использую группу радиокнопок 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
  }
}

Я попытался установить второй параметр изменить функцию, но она не определена.

Answer 1

Элемент интерфейса работает немного по-другому. @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();
  } 
}

CODEPEN

Answer 2

У вас неверные параметры в методе. Есть два способа, которыми это может go с помощью обработчика событий @change:

A

определение обработчика изменений без аргументов, например

<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);
}