Data not updating instantly after API response

Hey guys

I've an issue that I couldn't understand why it's happening

I've the following scenario :

I have an array called final_products that includes a nested array called products

I have a selectbox where I'm looping through products , I'm triggering an Onchange event to get a related id then send an API to get a response back..

I can see the data coming correctly from the API..

when I set an array to the upcoming data , nothing happens.. I can see the changes only when I hit select option again for another time..

I've this code below :

Data :

   data() {
            return {
                new_status: '',
                products: [],
                warehouse_products: [],
                product_id: '',
                ordered_products: [],
                final_prepared: [],
                custom_ordered: [],
                prepared_products: [],



            }
        },

This is the select

<div class="box" style="border:1px solid rgb(228, 228, 228);padding:20px;"  v-for="(final,index) in final_prepared">
                                   <select class="form-control" v-model="final.product_id"           
                                     @change="getProductWarehouseData($event,index)">
                                        <option value="" v-if="final.products.length > 0" disabled> Selectionner un
                                            produit
                                        </option>
                                        <option value="" v-else> Aucun produit </option>
                                        <option v-for="product in final.products" :value="product.id ">{{product.nom}}
                                        </option>
                                    </select>
</div>

This is the onChange method

           getProductWarehouseData(event, index) {
                let id = event.target.value;
                axios.get('api/product/warehouses/' + id)
                    .then((response) => {
                        this.warehouse_products='new value'
                 })
                    .catch(function (error) {
                        console.log(error);
                    })

            },

thank you in advance !!

SteamDiesel

6 years ago

Level 6

Using the <select></select> element in Vue can be troublesome. I've found that it tends to give me a bunch of annoyance when used directly on v-models. So instead I usually whip up a custom select component and pass in some props. In this example, I'm just working with static data, but you get the idea.

<template>
  <div class="bg-gray-600 w-64" @mouseleave="show = false">
      <button @click.prevent="show = !show"
      class="w-full px-4 py-2">
          {{ selected }}
      </button>
      <div v-if="show" 
      class="bg-gray-600 w-64 flex flex-col absolute">
          <button v-for="option in options" 
          :key="option.index"
          class="hover:bg-gray-500"
          @click.prevent="select(option)"> 
              {{ option }}
          </button>
      </div>
  </div>
</template>

<script>
export default {
    name: 'Select',
    data(){
        return {
            show: false,
            selected: 'select',
            options: [
                'select',
                'option 01',
                'option 02',
                'option 03',
                'option 04',
                'option 05',
            ]
        }
    },
    methods:{
        select(option){
            this.selected = option;
            this.show = false;
        }
    }
}
</script>

I'm using Tailwindcss standard classes if you wanted to paste this into a component and start playing with it and keep the basic styles I've applied. If not they're pretty self-descriptive classes.

The reason this works better than <select> is that the v-if removes the "drop-down" div from the dom entirely, then when "show" is true, it re-renders the div with any fresh data you've pushed to the array of options.

This is also a good way to handle a select case if you've using vuex for state management because you can give it more explicit instructions for triggering mutations or actions on the state.

I'm sorry I'm not answering your query directly, but maybe this is another way to approach your issue?

Also, I assume you've solved it yourself since posting this question. so maybe share your own solution?

Please or to participate in this conversation.