Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDB Vue Pro - Accompanying Radio JS?

elliotp free asked 6 years ago


Hi,I have a radio group, but i'm struggling with the accompanying radio JS, to stop multiple selection of the radio, and to obtain the value.  I'm new to Vue also, so this may be more of a vue question.  The problem is, event.currentTarget is the parent containing div.Code: <column md="3"> <md-inputid="card"value="card"label="Card"type="radio"@click.native="setMethod":checked="method==='card'"/> </column> <columnmd="3"> <md-inputid="paypal"value="paypal"label="PayPal"type="radio"@click.native="setMethod":checked="method==='paypal'"/> </column> <columnmd="6"> <md-inputid="bacs"value="bacs"label="Bank Transfer / Cheque"type="radio"@click.native="setMethod":checked="method==='bacs'"/> </column> setMethod(){ this.method=event.currentTarget.getAttribute('value'); //currentTarget appears to be the containing div console.log(this.method);  //is null } Thanks!

Mikołaj Smoleński staff answered 6 years ago


Hi Elliot, Please try the following code and write back if it will solve Your issue:
<MdInput type="radio"
 @click.native="toggleRadio1"
 :checked="radio1 === 1"
 label="Option 1"></MdInput>
 <MdInput type="radio"
 @click.native="toggleRadio2"
 :checked="radio1 === 2"
 label="Option 2"></MdInput>
 <MdInput type="radio"
 @click.native="toggleRadio3"
 :checked="radio1 === 3"
 label="Option 3"></MdInput>
 
  methods: {
 toggleRadio1() {
 this.radio1 = 1;
 console.log(this.radio1);
 },
 toggleRadio2() {
 this.radio1 = 2;
 console.log(this.radio1);
 },
 toggleRadio3() {
 this.radio1 = 3;
 console.log(this.radio1);
 }
 }
Regards

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags