CODEWITHSUNDEEP
vue.jsvuejs2
user7531085
user7531085

Reputation:

How to make components wait for Ajax changes

How can I make my components wait for an ajax call to complete before being rendered? Right now, their data objects are empty because the ajax call has not completed when they are mounted.

Additionally, I want all components to have access to this ajax data, which will be refreshed and updated every 30 seconds. What is the best way to achieve this?

//Snippet of what gets return from ajax call
{
  121: {
    table_info: {
    id: "121",
    name: "Test",
    table_number: "51",
    cap: "6",
    seating: "OPEN",
    position_x: "0.19297285",
    position_y: "0.07207237",
    participants_in_tables: "5",
    count: 5
   }
 }
}


//Global
var tableData; //This gets set when the Vue ajax call is complete after being mounted
var width = $(document).width();
var height = $(document).height();

//Vue
Vue.component('tables', {
      data: () => {
        return {
          tables: tableData
        }
      },
      template: `
                <div id="tableContain">
                    <div class='table' v-for="table in tables" :style="computeOffsets(table)">
                        {{table.table_info.name}}
                    </div>
                </div>
            `,
      methods: {
        computeOffsets(table) {
          return {
            top: (table.table_info.position_x * width) + 'px',
            left: (table.table_info.position_y * height) + 'px'
          }
        }
      });

    var app = new Vue({
      el: '#main',
      mounted() {
        $.ajax({
          method: 'POST',
          dataType: 'json',
          url: base_url + 'users/getTableAssignments/' + event_id
        }).done(data => {
          tableData = data; //Set global tableData 
        });
      }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="main">
  <table></table>
</div>

Upvotes: 0

Views: 866

Answers (1)

Canor
Canor

Reputation: 919

It's better to use created in vue and then get the data with props in component like:

Vue.component('tables', {  
  props: ['tables']  
  // ...
});

var app = new Vue({  
  el: '#main', 
  data: { tables: [] },
  created() { 
    axios.get('url').then( response => { this.tables = response.data } )
  }
});

I prefer axios but u can use ajax if u like :D

And if u like to refresh u can just use intervals but I prefer server side solution like sockets. Im using it in my app with laravel broadcasting, redis and sockets to have a realtime dashboard :D

Upvotes: 1

Related Questions