Fatal编程技术网
  • laravel/
  • Laravel 组件未在VueJs中正确渲染

Laravel 组件未在VueJs中正确渲染

laravel laravel-5 vue.js

Laravel 组件未在VueJs中正确渲染,laravel,laravel-5,vue.js,Laravel,Laravel 5,Vue.js,我一直在学习Vue.js组件，并尝试使用Vue.js和Laravel显示数据。但不知怎的，我无法正确地渲染它。有人能告诉我我做错了什么吗 我的路线： 我的gulpfile： 我正在发布代码。我的main.js文件： import Vue from 'vue'; import Router from 'vue-router'; import Resource from 'vue-resource'; import App from './components/App.vue'; import

我一直在学习Vue.js组件，并尝试使用Vue.js和Laravel显示数据。但不知怎的，我无法正确地渲染它。有人能告诉我我做错了什么吗

我的路线：

我的gulpfile：

我正在发布代码。我的main.js文件：

import Vue from 'vue';
import Router from 'vue-router';
import Resource from 'vue-resource';
import App from './components/App.vue';
import HomeView from './components/HomeView.vue';
// Installing some 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');
我的index.blade.view：

<!DOCTYPE html>
<html>
    <head>
        <title>CRUD WITH 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>
在浏览器中查看时，我从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>)

main.js:5466[Vue warn]：计算表达式“user.id”时出错：TypeError:无法读取未定义（在组件中找到）的属性“id”）警告@main.js:5466Watcher.get@main.js:7623Watcher@main.js:7605指令。_bind@main.js:12792linkAndCapture@main.js:11375compositelinelkfn@main.js:11344Vue。_compile@main.js:13058Vue。$mount@main.js:13893Vue。_init@main.js:6915Vue。_init@main.js:3492VueComponent@VM2428:2（匿名函数）@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（匿名函数）@main.js:1
main.js:5466[Vue warn]：计算表达式“user.name”时出错：TypeError:无法读取未定义（在组件中找到）的属性“name”）警告@main.js:5466Watcher.get@main.js:7623Watcher@main.js:7605指令。_bind@main.js:12792linkAndCapture@main.js:11375compositelinelkfn@main.js:11344Vue。_compile@main.js:13058Vue。$mount@main.js:13893Vue。_init@main.js:6915Vue。_init@main.js:3492VueComponent@VM2428:2（匿名函数）@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（匿名函数）@main.js:1
main.js:5466[Vue warn]：计算表达式“user.email”时出错：TypeError:无法读取未定义的属性“email”（在组件中找到：）警告@main.js:5466Watcher.get@main.js:7623Watcher@main.js:7605指令。_bind@main.js:12792linkAndCapture@main.js:11375compositelinelkfn@main.js:11344Vue。_compile@main.js:13058Vue。$mount@main.js:13893Vue。_init@main.js:6915Vue。_init@main.js:3492VueComponent@VM2428:2（匿名函数）@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（匿名函数）@main.js:1
main.js:5466[Vue warn]：计算表达式“user.address”时出错：TypeError:无法读取未定义（在组件中找到）的属性“address”警告@main.js:5466Watcher.get@main.js:7623Watcher@main.js:7605指令。_bind@main.js:12792linkAndCapture@main.js:11375compositelinelkfn@main.js:11344Vue。_compile@main.js:13058Vue。$mount@main.js:13893Vue。_init@main.js:6915Vue。_init@main.js:3492VueComponent@VM2428:2（匿名函数）@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（匿名函数）@main.js:1
main.js:5466[Vue warn]：计算表达式“user.created_at”时出错：TypeError:无法读取未定义（在组件中找到）的属性“created_at”）警告@main.js:5466Watcher.get@main.js:7623Watcher@main.js:7605指令。_bind@main.js:12792linkAndCapture@main.js:11375compositelinelkfn@main.js:11344Vue。_compile@main.js:13058Vue。$mount@main.js:13893Vue。_init@main.js:6915Vue。_init@main.js:3492VueComponent@VM2428:2（匿名函数）@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（匿名函数）@main.js:1
main.js:5466[Vue warn]：计算表达式“user.updated_at”时出错：TypeError:无法读取未定义（在组件中找到）的属性“updated_at”）
有人能解释一下我做错了什么吗？为了正确呈现，需要做哪些更改？

简单地说，就是从API获取变量，在完成请求之前对JS代码进行求值

简单地说，将
v-if
条件添加到
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>
就绪功能将是：

ready(){
     this.getAll();
}
首先，您需要声明默认数据

export default {
    data () {
        return {
            users: []
        }
    }
}
现在，您可以设置您的方法：

methods: {
    getAll () {
        return Vue.http.get('/api/users');
    }
}
现在我们可以绑定到
ready（）
函数。这将使我们的API调用获得我们的用户。从这里开始，我们需要确保
用户的components实例得到了从RESTful端点返回的新JSON对象


ready () {
    this.users = this.getAll();
}



现在应该可以正常工作了。
您好，欢迎使用SO！关于“由于我的帐户是新的，我不能发布更多的图片，所以我正在发布代码”，我只是想让你知道，发布代码比发布图片要好得多。希望有人能帮你解决你的问题。我真的不明白为什么会有人想贴照片，这是一个诚恳的问题。另一方面：我认为如果你只发布相关代码而不是所有代码，人们更可能会做出回应。我发布了所有代码，以防有人需要查看其他文件来回答问题。请从你的代码中删除图像，并用格式化的文本块替换它们-没有发布问题时，通常没有理由将文本转换为位图。仍然得到相同的回答。v-if没有帮助/您是否在应用更改后进行了编译？您是否确定用户变量通常已正确填充？我在更改后进行了编译，但我不能100%确定它是否已正确填充。如果我转到api/users，它会得到JSON数据。所以我的假设是：return UserServices.getAll（）正确地获取它，并在以后提供它。

export default {
    data () {
        return {
            users: []
        }
    }
}



methods: {
    getAll () {
        return Vue.http.get('/api/users');
    }
}



ready () {
    this.users = this.getAll();
}