vendredi 5 juillet 2019

In Controller Method Response not work in Vue

i am trying to fetch data from database using vue js. i created component ,router follow each step. but i dont know why my data not show in the console and fetch on page. here is my code.

    //AdminComponent.vue
    <template>
        <div class=”container”>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">Dashboard</div>
                        <div class="card-body">
                        <router-link :to="{ name: 'users' }" class="btn btn-primary">Refresh</router-link>
                            <table class="table table-condensed">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Mobile</th>
                                        <th>Email</th>
                                        <th>Address</th>
                                        <th>DOB</th>
                                        <th>Selected Plan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for = "user in users">
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>

                                    </tr> 
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <script> 
        export default {
            data() {
                return {
                    users: [],
                }
            },
            mounted() {
                let uri = '/admin/routes';
                this.axios.get(uri).then(response => {
                console.log(response.data);
                this.users = response.data;
                });
            }
        }
    </script>


    //Controller
    public function admin(Request $request)
        {
            $admin = $request->is_admin;
            $users = User::with('subs')->get(); 
           // return response()->json($users);   
             return response(view('admin',array('users'=>$users)),200);
        }
    //App.js

    require('./bootstrap');

    window.Vue = require('vue');

    import VueRouter from 'vue-router';
    Vue.use(VueRouter);

    import VueAxios from 'vue-axios';
    import axios from 'axios';

    import App from './App.vue';
    Vue.use(VueAxios, axios);


    import AdminComponent from './components/AdminComponent.vue';

    const routes = [

      {
          name: 'users',
          path: '/admin/routes',
          component: AdminComponent
      }
    ];

    const router = new VueRouter({ mode: 'history', routes: routes});
    const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app');

   // web.php

    Route::get('/admin/routes', 'HomeController@admin');

Hello, i am trying to fetch data from database using vue js. i created component ,router follow each step. but i dont know why my data not show in the console and fetch on page. here is my code.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire