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.
for the attribute isOrdersDropDownListDisabled
, when it is set to either of true
or false
, the drop-down list
in the child gets disabled or enabled accordingly, which indicates the binding is done correctly.
But for vModelSelectedGeometryOrder
, which represents 2-way binding
, it does not work for both of the following scanarios:
<code>1- when the user selects an item in the list, the log statments in the `computed` property in the child component are executed, but the watched property in `parent-2` which is `vModelSelectedGeometryOrder` does not get executed.
2- since it should be `2-way binding`, when i set the attribute `vModelSelectedGeometryOrder` in the `parent-2` component to any value, i expect that the log statments of the computed property in the child component to be executed and displays the value,
<code>1- when the user selects an item in the list, the log statments in the `computed` property in the child component are executed, but the watched property in `parent-2` which is `vModelSelectedGeometryOrder` does not get executed.
2- since it should be `2-way binding`, when i set the attribute `vModelSelectedGeometryOrder` in the `parent-2` component to any value, i expect that the log statments of the computed property in the child component to be executed and displays the value,
but that does not happen
</code>
1- when the user selects an item in the list, the log statments in the `computed` property in the child component are executed, but the watched property in `parent-2` which is `vModelSelectedGeometryOrder` does not get executed.
2- since it should be `2-way binding`, when i set the attribute `vModelSelectedGeometryOrder` in the `parent-2` component to any value, i expect that the log statments of the computed property in the child component to be executed and displays the value,
but that does not happen
am I emitting compPropsVModelSelectedGeometryOrder
wrong? why that is happening please?
child
<div id="idDivGeometriesOrderLabelContainer">
<label id="idLabelGeometriesOrder"> {{ tempTextGeometriesOrder }} </label>
<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>
import { GeoTIFFOverlaySettingsConstants } from '../../resources/GeoTIFFOverlaySettings/GeoTIFFOverlaySettingsConstants.js';
name: 'GeoTIFFOverlaySettingsGeomsOrderDropDownList',
tempTextGeometriesOrder: GeoTIFFOverlaySettingsConstants.CONST_STRING_GEOMETRIES_ORDER_LABEL.description,
vModelSelectedGeometryOrder: {
isOrdersDropDownListDisabled: {
featuresRecentlyRequestedProcessingProps: {
'update:vModelSelectedGeometryOrder': null,
compPropsVModelSelectedGeometryOrder: {
console.log('get.compPropsVModelSelectedGeometryOrder:', this.vModelSelectedGeometryOrder);
return this.vModelSelectedGeometryOrder;
console.log('set.compPropsVModelSelectedGeometryOrder:', value);
this.$emit('update:vModelSelectedGeometryOrder', value);
onGeometryOrderSelected(evt) {
const msg = JSON.stringify({ msg: verboseTag + 'xcx onGeometryOrderSelected():', evt: evt });
this.compPropsVModelSelectedGeometryOrder = evt;
<code><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>
</code>
<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:
<code><GeoTIFFOverlaySettingsGeomsOrderDropDownList
v-model:vModelSelectedGeometryOrder="vModelSelectedGeometryOrder"
v-bind:isOrdersDropDownListDisabled="isOrdersDropDownListDisabled"
v-bind:featuresRecentlyRequestedProcessingProps="featuresRecentlyRequestedProcessingProps"
></GeoTIFFOverlaySettingsGeomsOrderDropDownList>
<code><GeoTIFFOverlaySettingsGeomsOrderDropDownList
v-model:vModelSelectedGeometryOrder="vModelSelectedGeometryOrder"
v-bind:isOrdersDropDownListDisabled="isOrdersDropDownListDisabled"
v-bind:featuresRecentlyRequestedProcessingProps="featuresRecentlyRequestedProcessingProps"
></GeoTIFFOverlaySettingsGeomsOrderDropDownList>
</code>
<GeoTIFFOverlaySettingsGeomsOrderDropDownList
v-model:vModelSelectedGeometryOrder="vModelSelectedGeometryOrder"
v-bind:isOrdersDropDownListDisabled="isOrdersDropDownListDisabled"
v-bind:featuresRecentlyRequestedProcessingProps="featuresRecentlyRequestedProcessingProps"
></GeoTIFFOverlaySettingsGeomsOrderDropDownList>
parent-2:
<code><GeoTIFFOverlaySettingsLayoutContainer
v-bind:isOrdersDropDownListDisabled="isOrdersDropDownListDisabled"
v-bind:featuresRecentlyRequestedProcessingProps="featuresRecentlyRequestedProcessingProps"
v-model:vModelSelectedGeometryOrder="vModelSelectedGeometryOrder"
></GeoTIFFOverlaySettingsLayoutContainer>
vModelSelectedGeometryOrder(newVal, oldVal) {
let msg = JSON.stringify({msg: verboseTag + '@watch vModelSelectedGeometryOrder', newVal: newVal, oldVal: oldVal});
<code><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);
},
}
</code>
<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);
},
}