title: "No data available in table" VueJS
body: <p>I am building a real time web application. The server runs on Node.js and the client is written in VueJS. I have written an API to fetch player information. When I hit the REST end point, data gets displayed in the form of a table. Although, the data gets displayed right, the first rows says "No data available in table".</p>
  
  <p><a href="https://i.stack.imgur.com/7jmYo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7jmYo.png" alt="Picture"></a></p>
  
  <p>Here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import urlMixin from "./../mixins/url.js";
  
  export default {
  
      data() {
          return {
              playerData: "",
              errors:[]
          }
      },
  
      created: function(){
          this.getAllPlayers();
      },
  
      mixins: [urlMixin],
  
      methods: {
          getAllPlayers: function(){
              axios.get(`${this.url}/players`)
              .then(response =&gt;{
                  console.log(response.data.results);
  
                  this.playerData = response.data.results;
  
                  for(let i=0; i&lt;this.playerData.length;i++){
                      this.playerData[i].image = 
                          "data:image/jpeg;base64," +
                          btoa(
                              new Uint8Array(this.playerData[i].image.data).reduce(
                                  (data, byte) =&gt; data + String.fromCharCode(byte),
                                  ""
                          )
                      );
                  }
  
              })
              .catch(e =&gt; {
                  this.errors.push(e);
              });
          }
      },
  
      mounted() {
  
          $(function() {
              $('#player-table').DataTable({
                  dom: '&lt;"ui center aligned"f&gt;&lt;"ui segment"t&gt;&lt;"right-aligned-panel"p&gt;',
                  language: {
                      info: "",
                      paginate: {
                          first: "first",
                          previous: "&lt;i class='fa fa-chevron-left'&gt;&lt;/i&gt;",
                          next: "&lt;i class='fa fa-chevron-right'&gt;&lt;/i&gt;",
                          last: "last"
                      }
                  }
              });
  
          });
  
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style scoped&gt;
      .bread-segment {
          margin-bottom: 10px;
          background: none;
          box-shadow: none;
          border: none;
      }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;template&gt;
   &lt;div class="ui center aligned animated fadeIn" style="padding:20px;"&gt;
    &lt;table id="player-table" class="ui small table selectable " cellspacing="0" width="100%"&gt;
      &lt;thead&gt;
       &lt;tr&gt;
                          &lt;th&gt;Photo&lt;/th&gt;
                          &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Age&lt;/th&gt;
        &lt;th&gt;Sex&lt;/th&gt;
       &lt;/tr&gt;
      &lt;/thead&gt;
      
      &lt;tbody&gt;
       &lt;tr v-for="playerInfo in playerData"&gt;
        &lt;td&gt;&lt;img class="ui mini rounded image" :src="playerInfo.image"&gt;&lt;/td&gt;
                    
                          &lt;td&gt;&lt;a :href="'#/profile?name='+playerInfo.fname+'%20'+playerInfo.lname"&gt;{{playerInfo.fname}} {{playerInfo.lname}}&lt;/a&gt;&lt;/td&gt;
                          
        &lt;td&gt;{{playerInfo.age}}&lt;/td&gt;
        &lt;td&gt;{{playerInfo.sex}}&lt;/td&gt;
       &lt;/tr&gt;
      &lt;/tbody&gt;
     &lt;/table&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What wrong am I doing? How can I make sure that the text "No data available in table" doesn't appear?</p>