nuxt.js 获取数据到 vuetify 表

Question

我在获取 vuetify 表中的数据时遇到问题，它没有在边表中显示任何数据。

我的 Laravel API

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

Laravel API 控制器

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

Nuxt 代码

<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="registerlist"
      :search="search"
    ></v-data-table>
  </v-card>
</template>

<script>
  export default {
    data () {
      return {
        search: '',
        headers: [
    
          { text: 'SL,No', value: '' },
          { 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' },
        ],
        registerlist: [
          
        ],
}
              axios.get('/Businessregisterlist')
.then(res => this.registerlist = res.data.registerlist)
   

    },
  }
</script>

Answer 1

首先，您必须在这样的函数中调用API：

<script>
export default {
  data() {
    return {
       list: []
    }
  },
  methods: {
      callAPI() {
         axios.get('/', then(function(res){
            this.list = res.data.registerList;
         }))
      }
  },
   
  mounted(){
     this.callAPI(); // if you need that List on load then you can use mounted() otherwise that function will call during event.
  }
}
</script>

这里，在then() 里面，我认为最好使用function()。因为如果您使用函数，那么它将指示此对象。因此，我们可以轻松访问所有对象属性（例如：data()、methods() 等）。