Блог

я новичок в vuetify и nuxt.js

я получаю данные из базы данных, но я хочу показать это в таблице vuetify.

Контроллер API Laravel

 public function businesslist() {
      $businesslist = Business::paginate(2)->toJson(JSON_PRETTY_PRINT);
      return response($businesslist);
    }
}
  

МОЙ Laravel API

 Route::get('/businesslist', 'BusinessController@userlist')->name('businesslist');
  

МОЙ Nuxt.js страница vue

 <template>
  <v-card>
    <v-card-title>
      Nutrition
      <v-spacer></v-spacer>
      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :items="businessuser"
      :search="search"
    ></v-data-table>
  </v-card>
 </template>

 <script>
  

  export default {
        data() {
          return {
            search: '',
            headers: [{
                text: 'Name',
                value: 'name'
              },
              {
                text: 'Mobile  ',
                value: 'mobile_number'
              },
              {
                text: 'Location  ',
                value: 'location'
              },
              {
                text: 'Join Date  ',
                value: 'registration_date'
              },
              {
                text: 'Renewal Date  ',
                value: 'registration_renewal_date'
              },
            ],
            businessuser: [
    
            ],
          }
          },async asyncData({$axios}) {             let {data} = await $axios.$get('/businesslist')
                return {
                businesslist: data
                    }       },

      }
      }
       </script>
  

Вы должны использовать созданное событие, в этом случае вызовите свой API businesslist и в ответе вы должны присвоить полученные данные переменной businessuser vue js. Давайте посмотрим здесь один пример.

 created () {
      this.initialize();
    },

 methods: {
   initialize () { 
    this.businessuser = businesslistApiCalling();    
   }
 }