在 laravel 8 中使用 vuejs 从数据库中获取数据

Question

我正在尝试使用 vuejs（在 laravel 8 框架中）从数据库中获取数据。但它不会产生任何数据，也不会产生错误。我在这里分享一些截图和代码：

查看

数据库

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'); 

管理员控制器

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

管理员（模型）

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

app.js（js 内部）

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（我试图从数据库中获取数据）

<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 文件

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

我相信您希望在创建组件时调用 created 方法。从 methods 属性中删除创建的函数并将其添加到导出的默认对象中。

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