CODEWITHSUNDEEP
javascriptvue.jsvuejs2setv-for
sharin gan
sharin gan

Reputation: 383

$set slowing down performance in Vue

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

Upvotes: 2

Views: 995

Answers (1)

Dan
Dan

Reputation: 63059

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

Upvotes: 2

Related Questions