Почему не выводятся данные из базового примера vuetify?

221
16 декабря 2019, 08:30

Копирую пример, и с быстрым стартом хочу посмотреть, как это работает. Таблица выводится, а данные нет. В чём проблема?

new Vue({ 
    el: '#app', 
    data () { 
      return { 
        expand: false, 
        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%' 
          }, 
          { 
            name: 'Cupcake', 
            calories: 305, 
            fat: 3.7, 
            carbs: 67, 
            protein: 4.3, 
            iron: '8%' 
          }, 
          { 
            name: 'Gingerbread', 
            calories: 356, 
            fat: 16.0, 
            carbs: 49, 
            protein: 3.9, 
            iron: '16%' 
          }, 
          { 
            name: 'Jelly bean', 
            calories: 375, 
            fat: 0.0, 
            carbs: 94, 
            protein: 0.0, 
            iron: '0%' 
          }, 
          { 
            name: 'Lollipop', 
            calories: 392, 
            fat: 0.2, 
            carbs: 98, 
            protein: 0, 
            iron: '2%' 
          }, 
          { 
            name: 'Honeycomb', 
            calories: 408, 
            fat: 3.2, 
            carbs: 87, 
            protein: 6.5, 
            iron: '45%' 
          }, 
          { 
            name: 'Donut', 
            calories: 452, 
            fat: 25.0, 
            carbs: 51, 
            protein: 4.9, 
            iron: '22%' 
          }, 
          { 
            name: 'KitKat', 
            calories: 518, 
            fat: 26.0, 
            carbs: 65, 
            protein: 7, 
            iron: '6%' 
          } 
        ] 
      } 
    } 
  })
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> 
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> 
    <div id="app"> 
      <v-app id="inspire"> 
        <v-data-table 
          :headers="headers" 
          :items="desserts" 
          item-key="name" 
          show-expand 
          :single-expand="expand" 
          class="elevation-1" 
        > 
          <template #top> 
            <v-toolbar flat color="white"> 
              <v-toolbar-title>Expandable Table</v-toolbar-title> 
              <v-spacer></v-spacer> 
              <v-btn color="primary" dark @click="expand = !expand"> 
                {{ expand ? 'Close' : 'Keep' }} other rows 
              </v-btn> 
            </v-toolbar> 
          </template> 
          <template #item.expanded="{ headers }"> 
            <td :colspan="headers.length">Peek-a-boo!</td> 
          </template> 
        </v-data-table> 
      </v-app> 
    </div> 
 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

Answer 1

Нужно заменить скрипт:

<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

На скрипт из примера

<script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.0-alpha.10/dist/vuetify.min.js"></script>

И определить экземпляр Vuetify

new Vue({ 
  el: '#app', 
  vuetify: new Vuetify(), 
  data () { 
      return { 
          expand: false, 
          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%' 
              }, 
              { 
                  name: 'Cupcake', 
                  calories: 305, 
                  fat: 3.7, 
                  carbs: 67, 
                  protein: 4.3, 
                  iron: '8%' 
              }, 
              { 
                  name: 'Gingerbread', 
                  calories: 356, 
                  fat: 16.0, 
                  carbs: 49, 
                  protein: 3.9, 
                  iron: '16%' 
              }, 
              { 
                  name: 'Jelly bean', 
                  calories: 375, 
                  fat: 0.0, 
                  carbs: 94, 
                  protein: 0.0, 
                  iron: '0%' 
              }, 
              { 
                  name: 'Lollipop', 
                  calories: 392, 
                  fat: 0.2, 
                  carbs: 98, 
                  protein: 0, 
                  iron: '2%' 
              }, 
              { 
                  name: 'Honeycomb', 
                  calories: 408, 
                  fat: 3.2, 
                  carbs: 87, 
                  protein: 6.5, 
                  iron: '45%' 
              }, 
              { 
                  name: 'Donut', 
                  calories: 452, 
                  fat: 25.0, 
                  carbs: 51, 
                  protein: 4.9, 
                  iron: '22%' 
              }, 
              { 
                  name: 'KitKat', 
                  calories: 518, 
                  fat: 26.0, 
                  carbs: 65, 
                  protein: 7, 
                  iron: '6%' 
              } 
          ] 
      } 
  } 
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> 
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> 
    <div id="app"> 
      <v-app id="inspire"> 
        <v-data-table 
          :headers="headers" 
          :items="desserts" 
          item-key="name" 
          show-expand 
          :single-expand="expand" 
          class="elevation-1" 
        > 
          <template #top> 
            <v-toolbar flat color="white"> 
              <v-toolbar-title>Expandable Table</v-toolbar-title> 
              <v-spacer></v-spacer> 
              <v-btn color="primary" dark @click="expand = !expand"> 
                {{ expand ? 'Close' : 'Keep' }} other rows 
              </v-btn> 
            </v-toolbar> 
          </template> 
          <template #item.expanded="{ headers }"> 
            <td :colspan="headers.length">Peek-a-boo!</td> 
          </template> 
        </v-data-table> 
      </v-app> 
    </div> 
 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.0-alpha.10/dist/vuetify.min.js"></script>

READ ALSO
Canvas создание нескольких счетчиков

Canvas создание нескольких счетчиков

Подскажите, как создать несколько холстов со счетчиками которые работали по логике одной функцииПриведу пример

224
умный автоскроллинг на JS?

умный автоскроллинг на JS?

Есть JS функция, которая по заданному интервалу автоматически прокручивает вниз страницу в другом фреймеПодскажите, как сделать, чтобы она...

181
PHP MySQL запрос SELECT SUM() GROUP BY

PHP MySQL запрос SELECT SUM() GROUP BY

Помогите составить запрос в PHP кодеНужно подсчитать баланс по id в таблице

217