Improve component stability

This commit is contained in:
syuilo 2021-07-19 23:30:12 +09:00
parent f1c9e596e8
commit 6aef54a9e0
3 changed files with 11 additions and 5 deletions

View file

@ -27,7 +27,10 @@ export default defineComponent({
}, },
render() { render() {
const label = this.$slots.desc(); const label = this.$slots.desc();
const options = this.$slots.default(); let options = this.$slots.default();
// Fragment
if (options.length === 1 && options[0].props == null) options = options[0].children;
return h('div', { return h('div', {
class: 'cnklmpwm _formItem' class: 'cnklmpwm _formItem'
@ -37,7 +40,7 @@ export default defineComponent({
}, label), }, label),
...options.map(option => h('button', { ...options.map(option => h('button', {
class: '_button _formPanel _formClickable', class: '_button _formPanel _formClickable',
key: option.props.value, key: option.key,
onClick: () => this.value = option.props.value, onClick: () => this.value = option.props.value,
}, [h('span', { }, [h('span', {
class: ['check', { checked: this.value === option.props.value }], class: ['check', { checked: this.value === option.props.value }],

View file

@ -14,7 +14,7 @@ export default defineComponent({
class: 'pxhvhrfw', class: 'pxhvhrfw',
}, options.map(option => withDirectives(h('button', { }, options.map(option => withDirectives(h('button', {
class: ['_button', { active: this.value === option.props.value }], class: ['_button', { active: this.value === option.props.value }],
key: option.props.value, key: option.key,
disabled: this.value === option.props.value, disabled: this.value === option.props.value,
onClick: () => { onClick: () => {
this.$emit('update:value', option.props.value); this.$emit('update:value', option.props.value);

View file

@ -23,14 +23,17 @@ export default defineComponent({
}, },
render() { render() {
const label = this.$slots.desc(); const label = this.$slots.desc();
const options = this.$slots.default(); let options = this.$slots.default();
// Fragment
if (options.length === 1 && options[0].props == null) options = options[0].children;
return h('div', { return h('div', {
class: 'novjtcto' class: 'novjtcto'
}, [ }, [
h('div', label), h('div', label),
...options.map(option => h(MkRadio, { ...options.map(option => h(MkRadio, {
key: option.props.value, key: option.key,
value: option.props.value, value: option.props.value,
modelValue: this.value, modelValue: this.value,
'onUpdate:modelValue': value => this.value = value, 'onUpdate:modelValue': value => this.value = value,