vue3 with options api
as shown in the below posted code, the child component has a drop-down list
as shown in the code in section child
. This child component is hosted in parent-1
and parent-2
, and parent-1
is hosted in parent-2
as well
My question is, since child
components is hosted in parent-1
and parent-2
, does that granties if the value of vModelSelectedGeometryOrder
changed and for example,set to value 10
in parent-2
, then that value which is 10
must be reported or echos in child
component somehow? is that true? if not true, then how the two binging shoudl work?
child
<template>
<div id="idDivGeometriesOrderLabelContainer">
<label id="idLabelGeometriesOrder"> {{ tempTextGeometriesOrder }} </label>
</div>
<div id="idDivDropDownListContainer">
<select name="" id="idGeoTIFFOverlaySettingsDropDownList"
:value="compPropsVModelSelectedGeometryOrder"
@input="$emit('update:compPropsVModelSelectedGeometryOrder', $event.target.value)"
:disabled="isOrdersDropDownListDisabled"
@change="onGeometryOrderSelected($event.target.value)">
<option value="" disabled>orders</option>
<option v-for="featureProps in featuresRecentlyRequestedProcessingProps" :key="featureProps.get('DIGITIZED_FEATURE_PROPERTY_GEOJSON')">{{ featureProps.get('DIGITIZED_FEATURE_PROPERTY_GEOM_ORDER') }}</option>
</select>
</div>
</template>
<script>
import { GeoTIFFOverlaySettingsConstants } from '../../resources/GeoTIFFOverlaySettings/GeoTIFFOverlaySettingsConstants.js';
export default {
name: 'GeoTIFFOverlaySettingsGeomsOrderDropDownList',
data() {
return {
tempTextGeometriesOrder: GeoTIFFOverlaySettingsConstants.CONST_STRING_GEOMETRIES_ORDER_LABEL.description,
};
},
components: {},
props: {
vModelSelectedGeometryOrder: {
// type: String,
default: null,
},
isOrdersDropDownListDisabled: {
type: Boolean,
default: true,
},
featuresRecentlyRequestedProcessingProps: {
type: Object,
default: [],
},
},
emits: {
'update:vModelSelectedGeometryOrder': null,
},
computed: {
compPropsVModelSelectedGeometryOrder: {
get() {
console.log('get.compPropsVModelSelectedGeometryOrder:', this.vModelSelectedGeometryOrder);
return this.vModelSelectedGeometryOrder;
},
set(value) {
console.log('set.compPropsVModelSelectedGeometryOrder:', value);
this.$emit('update:vModelSelectedGeometryOrder', value);
},
},
},
methods: {
onGeometryOrderSelected(evt) {
const msg = JSON.stringify({ msg: verboseTag + 'xcx onGeometryOrderSelected():', evt: evt });
console.log(msg);
this.compPropsVModelSelectedGeometryOrder = evt;
},
},
};
</script>
parent-1 GeoTIFFOverlaySettingsLayoutContainer.vue:
<GeoTIFFOverlaySettingsGeomsOrderDropDownList
v-model:vModelSelectedGeometryOrder="vModelSelectedGeometryOrder"
v-bind:isOrdersDropDownListDisabled="isOrdersDropDownListDisabled"
v-bind:featuresRecentlyRequestedProcessingProps="featuresRecentlyRequestedProcessingProps"
></GeoTIFFOverlaySettingsGeomsOrderDropDownList>
parent-2:
<GeoTIFFOverlaySettingsLayoutContainer
v-bind:isOrdersDropDownListDisabled="isOrdersDropDownListDisabled"
v-bind:featuresRecentlyRequestedProcessingProps="featuresRecentlyRequestedProcessingProps"
v-model:vModelSelectedGeometryOrder="vModelSelectedGeometryOrder"
></GeoTIFFOverlaySettingsLayoutContainer>
...
...
...
watch: {
vModelSelectedGeometryOrder(newVal, oldVal) {
let msg = JSON.stringify({msg: verboseTag + '@watch vModelSelectedGeometryOrder', newVal: newVal, oldVal: oldVal});
console.log(msg);
},
}