I need to pass the value from the first input in the child component to the `optionsSkin` key of the parent component's `newSettings` object, and the value from the second input to the `optionsLeg` key. How can I bind each input to the corresponding inner object key?
// Parent
<template>
<ChartSettings :default="chartSettings" :modelValue="newSettings" />
</template>
<script>
export default {
data() {
return {
newSettings: {
optionsSkin: '',
optionsLeg: []
}
}
}
components: {
ChartSettings,
},
};
</script>
// Child
<q-option-group
:options="settings.optionsSkin"
type="radio"
@input="$emit('update:modelValue', $event.target.value)"
/>
<q-option-group
:options="settings.optionsLeg"
type="checkbox"
:toggle-indeterminate="false"
@input="$emit('update:modelValue', $event.target.value)"
/>
<script>
export default {
props: ['modelValue'],
};
</script>