title: How to wait and populate the data accordingly in Bootstrap Vue?
body: <p>I am using Bootstrap Vue Table. I am waiting for the data to be arrived and populate accordingly. And for getting and storing the data, I am using Vuex!</p>
  
  <p>The problem I am facing is that the <code>&lt;b-table&gt;</code>'s provider function doesn't really wait for the data to be arrived and just displays the empty one immediately.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;b-table class="table-lg fa-sort-icons table-rounded mt-3 mb-0" :items="fetchAllUsers" :fields="fields"&gt;&lt;/b-table&gt;
  </code></pre>
  
  <p>Method:</p>
  
  <pre><code>fetchAllUsers(ctx) {
  
    this.$store.dispatch(types.GET_CREATED_USERS_ASYNC)
  
    return this.getAllUsers // this is a getter from vuex(mapGetter) which gets all the users
  },
  </code></pre>
  
  <p>I used promises but that didn't really help:</p>
  
  <pre><code>let promise = new Promise((resolve, reject) =&gt; {
      if(Object.keys(this.getAllUsers).length &gt; 0) {
          resolve(this.getAllUsers)
      } else {
          reject(this.getAllUsers)
      }
  })
  
  promise.then((data) =&gt; console.log(data))
  </code></pre>