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"
}
}
Webbkameror.se answered 6 years ago
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: []
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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