mdbInput Default Radio Value doesn't seem to work


Topic: mdbInput Default Radio Value doesn't seem to work

Webbkameror.se asked 6 years ago

I expect to get one of the Radiobuttons to be selected depending on the "v-model"-value

Independent of the value, the radio group always selects the last radio button in my group. In the HTML & JavaScript below you can see a group of buttons all having the same name(radio) with different radioValues referring to the data property, "radio". However I change these values, only the last radio button is selected. You can see that I am importing the mdbInput. What am I doing wrong or have I found a bug?

HTML:

                <p>
              <mdb-input type="radio" id="radio-1" name="radio" radioValue="regular" v-model="radio" label="Som vanligt" />
              <mdb-input type="radio" id="radio-2" name="radio" radioValue="pause" v-model="radio" label="Pausa sidan" />
              <mdb-input type="radio" id="radio-3" name="radio" radioValue="retire" v-model="radio" label="Pensionera sidan och flytta kameran" />
            </p>

JavaScript:

import { mdbTab, mdbTabItem, mdbTabContent, mdbTabPane, mdbContainer, mdbCol, mdbRow, mdbIcon, mdbInput } from 'mdbvue'
export default {
name: 'CameraDetailsPage',
components: {
  mdbTab,
  mdbTabItem,
  mdbTabContent,
  mdbTabPane,
  mdbContainer,
  mdbCol,
  mdbRow,
  mdbIcon,
  mdbInput
},
data() {
  return {
    pillsActive: 0,
    verticalWithin: 0,
    cameraPage: '',
    radio: "regular"
  }
}

I simply did not have the latest version of MDB Vue. The code above started to work after an upgrade. Thanks!


Magdalena Dembna staff premium answered 6 years ago

You can try updating MDB Vue to 5.4.1 and change data type of radio to an array - in earlier versions we did not support v-model with multiple checkboxes.

data() {
  return {
    pillsActive: 0,
    verticalWithin: 0,
    cameraPage: '',
    radio: []
  }
}

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.3.0
  • Device: Mac
  • Browser: Chrome and Safari
  • OS: macOS 10.14.2
  • Provided sample code: No
  • Provided link: No