Sharing my code snippet below
<div v-for="namespace in chosenNamespaces" v-bind:key="namespace.id">
<!-- Select the Parameter -->
<select @change="updateParameter($event, namespace.id)" v-model="currParameterValues[namespace.id]">
<option v-for="parameter in getParametersForNamespace(namespace.id)">{{parameter}}</option>
</select>
<!-- Select Property -->
<select @change="updatePropertyType($event, namespace.id)" v-model="currPropertyValues[namespace.id]">
<option v-for="property in getPropertiesForNamespace(namespace.id)">{{property}}</option>
</select>
<!-- Select Item -->
<select v-model="currItemValues[namespace.id]">
<option v-for="item in getItemsForNamespace(namespace.id)">{{item}}</option>
</select>
</div>
methods: {
updateParameter(data, id){
....
this.$set(currParameterValues, id, data,target.value)
this.$set(currPropertyValues, id, someValue)
}
updatePropertyType(data, id){
...
this.$set(currPropertyValues, someThing, val)
}
}
I have multiple div elements that iterate through the list of chosenNamespaces array and generate a group of selection fields. What I am trying to achieve is to update the value of the second select field (Select for Property) when I change the value of the corresponding parameter select field (Select paramater) for that particular namespace using the updateParameter method. To do this, I use $set to modify the currPropertyValues array. However, I have noticed that whenever I change the parameter option, there is a delay of around 4-5 seconds before it processes the change. This delay might be due to Vue taking time to react to the modification in the property array values. If I remove $set from updateParameter, the response is immediate. How can I resolve this issue?
Edit: I have recreated the scenario on a fiddle where changing a dropdown value has a delay in reflecting the change: fiddle