Fixup port bindings in location view

dashboard/src/components/PortBindings.vue

@@ -2,21 +2,11 @@
 
 import { FormGroup, Checkbox, NumberInput } from 'pankow';
 
-const props = defineProps([ 'tcpPorts', 'udpPorts', 'error' ]);
-defineEmits([ 'update:tcpPorts', 'update:udpPorts' ]);
+defineProps([ 'error' ]);
 
-// copy value so we can use value as model value
-for (const p in props.tcpPorts) {
-  const port = props.tcpPorts[p];
-  port.value = port.defaultValue;
-  port.enabled = true;
-}
-
-for (const p in props.udpPorts) {
-  const port = props.udpPorts[p];
-  port.value = port.defaultValue;
-  port.enabled = true;
-}
+// all ports require a property called 'value' for the model to work
+const tcpPorts = defineModel('tcp');
+const udpPorts = defineModel('udp');
 
 </script>
 
@@ -26,7 +16,7 @@ for (const p in props.udpPorts) {
       <Checkbox :label="port.title" v-model="port.enabled" />
       <small>{{ port.description + '.' + (port.portCount >=1 ? (port.portCount + ' ports. ') : '') }}</small>
       <small v-show="port.readOnly">{{ $t('appstore.installDialog.portReadOnly') }}</small>
-      <small class="has-error" v-show="error.port === port.value">Port already taken</small>
+      <small class="has-error" v-if="error.port === port.value">Port already taken {{ port }}</small>
       <NumberInput v-model="port.value" :disabled="!port.enabled" :min="1"/>
       <!-- TODO <p class="text-small text-warning text-bold" ng-show="appInstall.domain.provider === 'cloudflare'">{{ 'appstore.installDialog.cloudflarePortWarning' | tr }} </p> -->
     </FormGroup>