Question

我一直在学习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>

我的app.vue文件：

<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 from '../services/UserServices';

export default{

    props: ['user'],

    data () {
      return {
        users: []
      }
    },

    route: {
        data () {
            return UserServices.getAll()
              .then(({ data }) => ({
          users: data
             }));
          }
    }
}
</script>

在App.Vue中导入的My UserServices.js：

import Vue from 'vue';

export default {

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

在浏览器中查看时，我从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>)

有人可以解释我做错了什么吗？需要改变什么才能正确呈现？

Answer 1

只需从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>

还应该更新方法

methods: {
    getAll () {
         this.$http.get('/api/users').then((response)=>{
               this.users = response.data;
          });
    }
}

准备好的功能将是：

ready(){
     this.getAll();
}

Answer 2

首先，您需要声明默认数据。

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

现在您可以设置方法：

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

现在我们可以绑定到ready ()函数了。这将使我们的API调用以获取我们的用户。从这里开始，我们需要确保我们的users的组件实例被提供给从RESTful端点返回的新JSON对象。

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

现在这应该可以正常工作。

组件未在VueJs中正确呈现

2 个答案: