CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuetify.js
proofzy
proofzy

Reputation: 637

Fill with values - dynamic dropdowns

I'm trying to fill dropdowns with values while dropdowns are "sent" trough props. I'm getting the data from server correctly, and storing it in array where I am using that array to fill selected dropdown. This problem looks like its Vuetify or Vue bug but I'm not sure.

Code for dynamic dropdowns looks like this (Vuetify):

    <v-col cols="12" lg="2" md="2" sm="6" xs="6" v-for="(dropdowns, index) in dropdownNumber" v-bind:key="index">

            <v-select
            :v-model="dropdowns.field_name"
            :loading="loadingInputs"
            :label="dropdowns.dropdown_name"
            :disabled="enableDropdowns"

            :items="getData[dropdowns.field_name]"
            :clearable="true"
     
            :item-text="dropdowns.field_name"
            :item-value="dropdowns.field_name"
            :item-key="dropdowns.field_name"
            @mousedown="changeFields(dropdowns.field_name, index)"
            @change="selectedValue(dropdowns.field_name, $event)"
            :multiple="dropdowns.multiple"
          >
           
          </v-select>

And function for take data from server:

    async getDropdownData($event, index) {
        
          const key = $event
          

         try {
          
          this.values['sector_name'] = this.categoryName()
          this.keys.forEach(element => {
            if(localStorage.getItem(element) != null) {
              this.values[element] = localStorage.getItem(element)
            } 
          });
  

  
          this.takeServerData = (await DataService.getDropdownData({
              existingValues: this.values,
              selectedDropdown: $event
          })).data 
          
          this.getData[key] = this.takeServerData
          

          console.log(this.getData)

         
         } catch (error) {
           this.error = "Dogodila se pogreška prilikom dohvaćanja vrijednosti za tu opciju."
         }
      },

Sometimes, while I'm editing my code it normally fill already clicked dropdown, but after refreshing site it does not work.

Photo example: https://i.sstatic.net/H3j6N.jpg

Is there something I'm missing?

Any help or advice is welcome!

Upvotes: 0

Views: 121

Answers (1)

ellisdod
ellisdod

Reputation: 1744

It sounds like a reactivity problem related to nested objects.

https://v2.vuejs.org/v2/guide/reactivity.html

Either sure your arrays are predefined within the getData object.

data () {
    return {
      getData: {
         field1 : [],
         field2 : []
      }
  }
},

Or update your getData object like this

this.$set(this.getData, key, this.takeServerData)

Upvotes: 1

Related Questions