title: Vuetify v-data-table doesn't fully load data: blank rows
body: <p>Vue version: 2.6.10</p>
  
  <p>Vuetify version: 1.5</p>
  
  <p>I am using example data of Vuetify 1.5.16 documentation: <a href="https://v15.vuetifyjs.com/en/components/data-tables" rel="nofollow noreferrer">https://v15.vuetifyjs.com/en/components/data-tables</a></p>
  
  <p>The table is shown correctly and I can edit appearance of it using props. The problem is that data is not fully loaded. There is exactly the same number of lines in table as there are objects in array but all lines are blank (blank td tags). </p>
  
  <p>When I enabled prop "loading", it is all the time true (I can see progress line transition effect all the time).</p>
  
  <pre><code>{% extends 'base.html' %}
  {% block title %}Page name{% endblock %}
  
  {% block custom_style %}
  
  &lt;link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"&gt;
  &lt;link href="https://cdn.jsdelivr.net/npm/vuetify@1.5/dist/vuetify.min.css" rel="stylesheet"&gt;
  
  &lt;!-- &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"&gt; --&gt;
  {% endblock %}
  
  
  {% block content %} 
  &lt;v-app id="app-name"&gt;
          &lt;template&gt;
              &lt;v-data-table dark loading no-data-text :headers="headers" :items="desserts"
                  class="elevation-1"&gt;
                  &lt;template v-slot:items="props"&gt;
                      &lt;td&gt; {{ props.item.name }}&lt;/td&gt;
                      &lt;td class="text-xs-right"&gt;{{ props.item.calories }}&lt;/td&gt;
                      &lt;td class="text-xs-right"&gt;{{ props.item.fat }}&lt;/td&gt;
                      &lt;td class="text-xs-right"&gt;{{ props.item.carbs }}&lt;/td&gt;
                      &lt;td class="text-xs-right"&gt;{{ props.item.protein }}&lt;/td&gt;
                      &lt;td class="text-xs-right"&gt;{{ props.item.iron }}&lt;/td&gt;
                  &lt;/template&gt;
              &lt;/v-data-table&gt;
          &lt;/template&gt;
      &lt;/div&gt;
  &lt;/v-app&gt;
  {% endblock %}
  {% block custom_js_back %}
  
  
  &lt;!-- development version, includes helpful console warnings --&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vuetify@1.5/dist/vuetify.js"&gt;&lt;/script&gt;
  
  
  &lt;script&gt;
  
      var vueData = new Vue({
          delimiters: ["&lt;%", "%&gt;"],
          el: '#app-name',
          data: {
              // example data
              headers: [
                  {
                      text: 'Dessert (100g serving)',
                      align: 'left',
                      sortable: false,
                      value: 'name',
                  },
                  { text: 'Calories', value: 'calories' },
                  { text: 'Fat (g)', value: 'fat' },
                  { text: 'Carbs (g)', value: 'carbs' },
                  { text: 'Protein (g)', value: 'protein' },
                  { text: 'Iron (%)', value: 'iron' },
              ],
              desserts: [
                  {
                      name: 'Frozen Yogurt',
                      calories: 159,
                      fat: 6.0,
                      carbs: 24,
                      protein: 4.0,
                      iron: '1%',
                  },
                  {
                      name: 'Ice cream sandwich',
                      calories: 237,
                      fat: 9.0,
                      carbs: 37,
                      protein: 4.3,
                      iron: '1%',
                  },
                  {
                      name: 'Eclair',
                      calories: 262,
                      fat: 16.0,
                      carbs: 23,
                      protein: 6.0,
                      iron: '7%',
                  },
              ],
          },
      });
  
  &lt;/script&gt;
  {% endblock custom_js_back %}
  </code></pre>
  
  <p>Django probably has nothing to do with this.</p>
  
  <p><a href="https://i.stack.imgur.com/rnqA3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rnqA3.png" alt="The v-data-table component has all data but it is not shown in table"></a></p>