Below is my code
<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)
}
}
So I have many div which loops over the list of chosenNamespaces array and creates a set of selects. Now In that, I want to change the value of the second select i.e Select for Property when I change the value of Select paramater for that corresponding namespace using updateParameter method. I do that by using $set to update the array currPropertyValues. But I observe whenever I change the parameter option it take a while(4-5 secs) to process since maybe Vue takes time to react to the change in property array value. If I simply remove $set updateParameter it responds immediately. How can I solve this?
Edit Here I have replicated on fiddle, when I change a value in dropdown it takes time to reflect: fiddle
This happens because of using the v-model array indexes like object keys, which creates huge arrays. For example, doing the following creates an array with 152,395,893 items, which will be very slow to work with in a template:
const arr = [];
arr[152395893] = '...';
With an array, this number is not a key's name, but a numerical index. What you want is an object. This creates just 1 item:
const obj = {};
obj[152395893] = '...';
Change these both to objects:
currParameterValues: {},
currOperatorValues: {}
The adjusted Fiddle