fix(NcActionRadio): change modelValue to behave like NcCheckboxRadioSwitch
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
This commit is contained in:
Родитель
0d9efa628e
Коммит
1c50065e63
|
@ -10,27 +10,34 @@ So that only one of each name set can be selected at the same time.
|
|||
|
||||
```vue
|
||||
<template>
|
||||
<NcActions>
|
||||
<NcActionRadio @change="alert('(un)checked !')" name="uniqueId">First choice</NcActionRadio>
|
||||
<NcActionRadio value="second" v-model="radioValue" name="uniqueId" @change="alert('(un)checked !')">Second choice (v-model)</NcActionRadio>
|
||||
<NcActionRadio :model-value="true" name="uniqueId" @change="alert('(un)checked !')">Third choice (checked)</NcActionRadio>
|
||||
<NcActionRadio :disabled="true" name="uniqueId" @change="alert('(un)checked !')">Fourth choice (disabled)</NcActionRadio>
|
||||
</NcActions>
|
||||
<div>
|
||||
<NcActions>
|
||||
<NcActionRadio v-for="option in radioOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
:disabled="option.disabled"
|
||||
name="uniqueId"
|
||||
v-model="radioValue">
|
||||
{{ option.label }}
|
||||
</NcActionRadio>
|
||||
</NcActions>
|
||||
<span>Selected value: {{ radioValue }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radioValue: false,
|
||||
radioOptions: [
|
||||
{ value: 'first', label: 'First choise', disabled: false },
|
||||
{ value: 'second', label: 'Second choise', disabled: false },
|
||||
{ value: 'third', label: 'Third choise', disabled: false },
|
||||
{ value: 'fourth', label: 'Fourth choise (disabled)', disabled: true },
|
||||
],
|
||||
radioValue: 'first',
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
alert(message) {
|
||||
alert(message)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
@ -41,8 +48,8 @@ So that only one of each name set can be selected at the same time.
|
|||
<span class="action-radio" role="menuitemradio" :aria-checked="ariaChecked">
|
||||
<input :id="id"
|
||||
ref="radio"
|
||||
v-model="model"
|
||||
:disabled="disabled"
|
||||
:checked="checked"
|
||||
:name="name"
|
||||
:value="value"
|
||||
:class="{ focusable: isFocusable }"
|
||||
|
@ -100,11 +107,11 @@ export default {
|
|||
},
|
||||
|
||||
/**
|
||||
* checked state of the the radio element
|
||||
* checked state of the radio element
|
||||
*/
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -186,7 +193,11 @@ export default {
|
|||
this.$refs.label.click()
|
||||
},
|
||||
onChange(event) {
|
||||
this.model = this.$refs.radio.checked
|
||||
if (this.checked !== undefined) {
|
||||
this.model = this.$refs.radio.checked
|
||||
} else {
|
||||
this.model = this.value
|
||||
}
|
||||
|
||||
/**
|
||||
* Emitted when the radio state is changed
|
||||
|
|
Загрузка…
Ссылка в новой задаче