コンポーネントがVueJsで正しくレンダリングされない

-2

Vue.jsコンポーネントを学習していて、vue.jsとLaravelを使用してデータを表示しようとしています。しかし、どういうわけか私はそれを適切にレンダリングすることはできません。誰かが私が間違っていることを私に見せてもらえますか？コンポーネントがVueJsで正しくレンダリングされない

マイルート：

マイ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>

マイUserServices.js。 Vue：

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

私が間違っていることを誰かが説明できますか？適切にレンダリングするためには何を変更する必要がありますか？

出典

2016-08-08 Osvaldas V

こんにちは、ようこそ！「私のアカウントが新しくなったので、もっと写真を投稿することはできないので、コードを投稿しています」ということだけを伝えたいと思います。誰かがあなたの質問をお手伝いできることを願っています。 –

誰かが写真を投稿したいのはなぜか分かりません。誠実な質問です。 – gurghet

サイドノート：あなたのコードの** ALL **ではなく**関連するコード**のみを投稿すると、人々はもっと反応する可能性が高いと思います。 – gurghet

変数をAPIから取得するだけで、要求が完了する前にJSコードがエバリュエートされています。

単に

、あなたも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>

方法にv-if条件を追加するには

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

を更新する必要があり、レディ機能は次のようになります。すべての

ready(){ 
    this.getAll(); 
}

出典

2016-08-08 15:13:45

まだ同じ応答を得ています。 v-ifが助けにならない;/ –

変更を適用した後にコンパイルしましたか？ –

また、一般的にusers変数が正しく入力されていますか？ –

ファーストデフォルトデータを宣言する必要があります。

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

今あなたがセットアップできるあなたの方法：

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

は、今、私たちは私たちの ready()機能と結合することができます。これによりAPIを呼び出してユーザーを獲得できます。ここから、 usersのコンポーネントインスタンスが、RESTfulなエンドポイントから戻って来る新しいJSONオブジェクトに供給されていることを確認する必要があります。

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

これで正しく動作するはずです。

出典

2016-08-08 15:54:25 Ohgodwhy

コンポーネントがVueJsで正しくレンダリングされない

答えて

関連する問題