Vue migration to composition api#2464
Conversation
| const featureLayers = ref([]) as Ref<NamedFeatureLayer[]> | ||
| const dragTargetLayer = ref(null) as Ref<NamedFeatureLayer | null> | ||
| const dragInsertBefore = ref(false) | ||
| const draggedLayer = ref(null) as Ref<NamedFeatureLayer | null> |
There was a problem hiding this comment.
@linusbbb Use generics instead of type casts
| const featureLayers = ref([]) as Ref<NamedFeatureLayer[]> | |
| const dragTargetLayer = ref(null) as Ref<NamedFeatureLayer | null> | |
| const dragInsertBefore = ref(false) | |
| const draggedLayer = ref(null) as Ref<NamedFeatureLayer | null> | |
| const featureLayers = ref<NamedFeatureLayer[]>([]) | |
| const dragTargetLayer = ref<NamedFeatureLayer | null>(null) | |
| const dragInsertBefore = ref(false) | |
| const draggedLayer = ref<NamedFeatureLayer | null>(null) |
| onBeforeUnmount(() => { | ||
| if (unsubscribe) { | ||
| unsubscribe() | ||
| } | ||
| }) | ||
|
|
There was a problem hiding this comment.
@linusbbb PLease revert the order here because it was not relevant
| function getType (lockkey: LockKey) { | ||
| switch (lockkey.type) { | ||
| case LockKeyType.Inside: | ||
| return 'innen' | ||
| case LockKeyType.Outside: | ||
| return 'aussen' | ||
| default: | ||
| return '' |
There was a problem hiding this comment.
@linusbbb This should become a computed which makes it easier to debug and a bit more performant
| if (getFeatureType(this.selectedFeature) === FeatureType.Flash) { | ||
| this.selectedFeature = (getFeatureData(this.selectedFeature) as FlashFeatureData).refFeature | ||
| } |
There was a problem hiding this comment.
@linusbbb This if is missing in the new implementation. Why? Or just accidental?
| function getFeatureName (feature: Feature<Geometry>): string { | ||
| return getFeatureNameOfType(getFeatureType(feature)) | ||
| } | ||
|
|
||
| #menuItem { | ||
| cursor: pointer; | ||
| margin-bottom: 5px; | ||
| border-radius: 10px; | ||
| background-color: gainsboro; | ||
| padding-left: 5px; | ||
| function getLabel (feature: Feature<Geometry>): string { | ||
| return getFeatureLabel(feature) | ||
| } |
There was a problem hiding this comment.
@linusbbb With the new setup script we don't need these wrapper functions but can directly use the imported functions in the template.
| onMounted(() => { | ||
| const mode = route.query.mode | ||
| if (mode) { | ||
| const ele = document.getElementById(mode.toString()) |
There was a problem hiding this comment.
@linusbbb I thought we wanted to get rid of this as well by setting an active class on the list item that matches the given mode? Or do I remember wrong?
| mounted (): void { | ||
| this.developmentOptions = Configuration.developmentMode() | ||
| } | ||
| const emit = defineEmits(['show-menu']) |
There was a problem hiding this comment.
@linusbbb Safer emits declaration
| const emit = defineEmits(['show-menu']) | |
| const emit = defineEmits<{ 'show-menu': [value: boolean] }>() |
| this.$emit('showMenu', false) | ||
| this.menuBtnColor = '' | ||
| this.$router.push('/') | ||
| watch(router.currentRoute, currentRoute => { |
There was a problem hiding this comment.
@linusbbb Instead of router.currentRoute use const route = useRoute() like you did in other components. This also requires some changes in the code below
|
|
||
| const isDevelopmentMode = Configuration.developmentMode() | ||
| const map: OlMap = store.state.map | ||
| const mapRoot = ref<HTMLDivElement | null>(null) |
| return scaleLine!.getScaleForResolution() | ||
| } | ||
|
|
||
| onMounted((): void => { |
There was a problem hiding this comment.
@linusbbb Please readd the comments in this function again so that we still get the context
2 participants
No description provided.