Data fetching from database using vuejs in laravel 8

Question

I am trying to fetch data from database using vuejs (in laravel 8 framework ). But it yields no data, no error either. I am sharing some screenshots and codes here :

View

Database

web.php

Route::get('/','App\Http\Controllers\vuecrud@index');

Route::post('/app/add_data','App\Http\Controllers\adminController@addTag');

Route::get('/app/get_data','App\Http\Controllers\adminController@show');

Route::any('{slug}','App\Http\Controllers\vuecrud@index'); 

AdminController

public function show()
{  
   
   return admin::all();
   
}

admin(model)

class admin extends Model
    {
        //use HasFactory;
        protected $fillable = ['tagName'];
    }

app.js(inside js floder)

require('./bootstrap');

window.Vue = require('vue')
import router from './router'
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
import common from './common'
Vue.mixin(common)

Vue.use(ViewUI);

('mainapp', require('./components/mainapp.vue').default)
const app = new Vue({
    el: '#app',
    router
})

router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import firstPage from './components/pages/firstvuepage'
import aboutpage from './components/pages/aboutus'
import admin from './components/pages/admin'

const routes = [
    {
        path:'/firstpage',
        component: firstPage
    },
    {
        path:'/about',
        component: aboutpage
    },
    {
        path:'/admin',
        component: admin
    }
]

export default new Router({
    mode:'history',
    routes
}) 

admin.vue(where I am trying to fetch data from database )

<template>
  <div>
    <table  class="_table">
          <tr>
              <td>Name</td>
              <td>Action</td>
          </tr>
      
          <tr v-for="(getname, i) in admins" :key="i" v-if="admins.length">
              <td class="_table_name">{{getname.tagName}}</td>
              <td>
                  <Button class="btn btn-info" size="small">Edit</Button>
                  <Button class="btn btn-danger" size="small">Delete</Button>                 
              </td>
          </tr>
      </table>

  </div>

</template>



<script>
    export default {
        data (){
            return {
                data:{
                     tagName:''
                },
                modal1: false,
                isAdding: false,
                admins: []
            }
        
        },

        methods :{
       
            async created(){
                const res = await this.callApi('get','app/get_data')
                if(res.status==200) {
                    this.admins = res.data
                
                }else{
                    this.smr()
                }
            }
        }
    
    }

</script>

common.js file

export default {
data(){
    return{

    }
},
methods:{
    async callApi(method, url, dataobject){

        try{
          return await axios({
             method: method,
             url: url,
             data: dataobject
           });

        }catch(e){
          return e.response
        }
    }
}

Answer 1

I believe you want the created method to be called when the component is being created. Remove the created function from inside the methods property and add it to the exported default object.

export default {
    data() {...},
    methods: {...}, 
    created() {...}
}