laravel - Component is not properly rendering in VueJs -
i've been learning vue.js components , trying show data using vue.js , laravel. somehow can't rendered properly. show me doing wrong?
my routes:
my gulpfile:
i'm posting code. main.js file:
import vue 'vue'; import router 'vue-router'; import resource 'vue-resource'; import app './components/app.vue'; import homeview './components/homeview.vue'; // installing plugins vue.use(router); vue.use(resource); // registering filters globally // vue.filter(); export var router = new router({ history: true }); router.map({ '/': { name: 'app', component: app, }, 'test':{ name: 'test', component: homeview } }); // redirect 404 pages router.redirect({ '*': '/' }); router.start(app, 'app'); my index.blade.view :
<!doctype html> <html> <head> <title>crud vue js</title> <link href="https://fonts.googleapis.com/css?family=lato:100" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=lato:100,200,300,400" rel="stylesheet" type="text/css"> <link href='https://fonts.googleapis.com/css?family=roboto:400,500,700' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/icon?family=material+icons" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link href="/css/all.css" rel='stylesheet' type='text/css'> </head> <body> <div class="container"> <app> </app> </div> <script src="/js/main.js"> </script> </body> </html> my app.vue file:
<template> <div id="usercontroller"> <form action="#"> <div class="form-group"> <label for="name">name:</label> <input type="text" name="name" id="name"> </div> </form> <table class="table"> <thead> <th>id</th> <th>name</th> <th>email</th> <th>address</th> <th>created_at</th> <th>updated_at</th> </thead> </table> <tbody> <tr v-for="user in users"> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.email }}</td> <td>{{ user.address }}</td> <td>{{ user.created_at }}</td> <td>{{ user.updated_at }}</td> </tr> </tbody> <main> <router-view> </router-view> </main> </div> </template> <script> import userservices '../services/userservices'; export default{ props: ['user'], data () { return { users: [] } }, route: { data () { return userservices.getall() .then(({ data }) => ({ users: data })); } } } </script> my userservices.js imported in app.vue:
import vue 'vue'; export default { getall () { return vue.http.get('/api/users'); } } when viewing in browser error vuedevtools:
main.js:5466[vue warn]: error when evaluating expression "user.id": typeerror: cannot read property 'id' of undefined (found in component: <router-app>)warn @ main.js:5466watcher.get @ main.js:7623watcher @ main.js:7605directive._bind @ main.js:12792linkandcapture @ main.js:11375compositelinkfn @ main.js:11344vue._compile @ main.js:13058vue.$mount @ main.js:13893vue._init @ main.js:6915vue._init @ main.js:3492vuecomponent @ vm2428:2(anonymous function) @ main.js:4299_match @ main.js:4308onchange @ main.js:3904listener @ main.js:2643start @ main.js:2646start @ main.js:40878../components/app.vue @ main.js:14679s @ main.js:1e @ main.js:1(anonymous function) @ main.js:1 main.js:5466[vue warn]: error when evaluating expression "user.name": typeerror: cannot read property 'name' of undefined (found in component: <router-app>)warn @ main.js:5466watcher.get @ main.js:7623watcher @ main.js:7605directive._bind @ main.js:12792linkandcapture @ main.js:11375compositelinkfn @ main.js:11344vue._compile @ main.js:13058vue.$mount @ main.js:13893vue._init @ main.js:6915vue._init @ main.js:3492vuecomponent @ vm2428:2(anonymous function) @ main.js:4299_match @ main.js:4308onchange @ main.js:3904listener @ main.js:2643start @ main.js:2646start @ main.js:40878../components/app.vue @ main.js:14679s @ main.js:1e @ main.js:1(anonymous function) @ main.js:1 main.js:5466[vue warn]: error when evaluating expression "user.email": typeerror: cannot read property 'email' of undefined (found in component: <router-app>)warn @ main.js:5466watcher.get @ main.js:7623watcher @ main.js:7605directive._bind @ main.js:12792linkandcapture @ main.js:11375compositelinkfn @ main.js:11344vue._compile @ main.js:13058vue.$mount @ main.js:13893vue._init @ main.js:6915vue._init @ main.js:3492vuecomponent @ vm2428:2(anonymous function) @ main.js:4299_match @ main.js:4308onchange @ main.js:3904listener @ main.js:2643start @ main.js:2646start @ main.js:40878../components/app.vue @ main.js:14679s @ main.js:1e @ main.js:1(anonymous function) @ main.js:1 main.js:5466[vue warn]: error when evaluating expression "user.address": typeerror: cannot read property 'address' of undefined (found in component: <router-app>)warn @ main.js:5466watcher.get @ main.js:7623watcher @ main.js:7605directive._bind @ main.js:12792linkandcapture @ main.js:11375compositelinkfn @ main.js:11344vue._compile @ main.js:13058vue.$mount @ main.js:13893vue._init @ main.js:6915vue._init @ main.js:3492vuecomponent @ vm2428:2(anonymous function) @ main.js:4299_match @ main.js:4308onchange @ main.js:3904listener @ main.js:2643start @ main.js:2646start @ main.js:40878../components/app.vue @ main.js:14679s @ main.js:1e @ main.js:1(anonymous function) @ main.js:1 main.js:5466[vue warn]: error when evaluating expression "user.created_at": typeerror: cannot read property 'created_at' of undefined (found in component: <router-app>)warn @ main.js:5466watcher.get @ main.js:7623watcher @ main.js:7605directive._bind @ main.js:12792linkandcapture @ main.js:11375compositelinkfn @ main.js:11344vue._compile @ main.js:13058vue.$mount @ main.js:13893vue._init @ main.js:6915vue._init @ main.js:3492vuecomponent @ vm2428:2(anonymous function) @ main.js:4299_match @ main.js:4308onchange @ main.js:3904listener @ main.js:2643start @ main.js:2646start @ main.js:40878../components/app.vue @ main.js:14679s @ main.js:1e @ main.js:1(anonymous function) @ main.js:1 main.js:5466 [vue warn]: error when evaluating expression "user.updated_at": typeerror: cannot read property 'updated_at' of undefined (found in component: <router-app>) can explain please doing wrong? , needs changed rendered?
simply getting variables api, , js code being evaulated before finishing request.
simply, add v-if condition tbody
<tbody v-if="users"> <tr v-for="user in users"> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.email }}</td> <td>{{ user.address }}</td> <td>{{ user.created_at }}</td> <td>{{ user.updated_at }}</td> </tr> </tbody> also methods should updated
methods: { getall () { this.$http.get('/api/users').then((response)=>{ this.users = response.data; }); } } and ready function be:
ready(){ this.getall(); }
Comments
Post a Comment