<template> <div class="figure penis" > <div class="value-section"> <span class="value-label">Units</span> <select :value="units" class="input" :disabled="!editing.has('penis')" @change="emit('units', $event.target.value)" > <option value="imperial">Imperial</option> <option value="metric">Metric</option> </select> </div> <div class="value-section"> <span class="value-label">Penis length</span> <span v-if="units === 'metric'"> <input v-model="penis.metricLength" type="number" class="volume input" min="1" max="30" :disabled="!editing.has('penis')" > cm </span> <span v-if="units === 'imperial'"> <input v-model="penis.imperialLength" type="number" class="volume input" min="1" max="30" :disabled="!editing.has('penis')" > inch </span> </div> <div class="value-section"> <span class="value-label">Penis girth</span> <span v-if="units === 'metric'"> <input v-model="penis.metricGirth" type="number" class="volume input" min="1" max="30" :disabled="!editing.has('penis')" > cm </span> <span v-if="units === 'imperial'"> <input v-model="penis.imperialGirth" type="number" class="volume input" min="1" max="30" :disabled="!editing.has('penis')" > inch </span> </div> <div class="value-section"> <span class="value-label">Circumcised</span> <select v-model="penis.isCircumcised" class="input" :disabled="!editing.has('penis')" > <option :value="null" /> <option :value="true">Yes</option> <option :value="false">No</option> </select> </div> </div> </template> <script setup> import { reactive, watch } from 'vue'; const props = defineProps({ edits: { type: Object, default: null, }, editing: { type: Set, default: null, }, units: { type: String, default: null, }, }); const emit = defineEmits(['penis', 'units']); const penis = reactive(props.edits.penis); watch(penis, () => emit('penis', penis)); </script>