[Vuejs]-VueJS Wait for all API queries to come back

by

0👍

✅

how about usd componentkey

<b-container v-if="load_list.every((x) => x)" :key="componentKey">

 function() {
      API.getActor(this.id)
        .then(a => {
          this.getActor(a)
          this.componentKey++
        })
        .catch(error=> console.log(error))
        .finally(() => {
          this.load_list[0] = false

        })

0👍

You should use a watcher instead of using computed property it will perfectly fit in you scenario:

Watcher official docs

In your case you can watch your load_list data property. when whenever any change happen in load_list then that watcher will run.In the watcher by comparing your values combinations you can set your listLoaded (which you should need to declare within the data())

Example watcher code of your scenario

watch:{
   //whenever load_list changes, this function will run

   load_list:{
    handler(newList, oldList) {
      let isLoaded= newList.every((x) => x)

      if(isLoaded){
        //code here 
      },
    }
   }
 },

I hope that will help you.

0👍

const vm = new Vue({
  el: "#root",
  data() {
    return {
      list1: [false, true],
      list2: {
        0: false,
        1: true
      }
    }
  },
  computed: {
    load1() {
      return this.list1.every(it => it);
    },
    load2() {
      return Object.values(this.list2).every(it => it);
    }
  },
  methods: {
    handler1() {
      Vue.set(this.list1, 0, true);
    },
    handler2() {
      this.list2[0] = true;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <div>
    <div>
      <div v-if="load1">All true</div>
      <button type="button" @click="handler1">Array</button>
    </div>
    <div>
      <div v-if="load2">All true</div>
      <button type="button" @click="handler2">Object</button>
    </div>
  </div>
</div>

Due to limitations in JavaScript, there are types of changes that Vue cannot detect with arrays and objects. These are discussed in the reactivity section.

See

Leave a comment