2015-07-21 85 views
0

将Laravel和Vue.js合并到一个表中会导致一些问题。Vue.js和Laravel集成问题

本质上,我试图将v-repeat属性与使用vue-resources扩展的http:get请求组合使用。问题是没有任何值可以通过Vue传递 - 我只需将括号中的{{first_name}}和{{email_address}}。

我可以确认由http:get请求调用的API方法实际上是在分发数据(手动访问浏览器中的URL显示数据)。

这里是在routes.php文件档案,负责输出数据的代码:

get('api/v1_users',function() 
{ 
    return App\User::all()->toJson(); 
}); 

,这里是它在浏览器中吐出:

[{"email_address":"[email protected],"first_name":"John","password":"test123"}] 

的Chrome浏览器控制台不显示错误或警告。

这里是我的刀片文件:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="../../favicon.ico"> 

    <title>Navbar Template for Bootstrap</title> 

    <!-- Bootstrap core CSS --> 
    <link media="all" type="text/css" rel="stylesheet" href="{{ URL::asset('css/bootstrap.min.css') }}"> 

    <!-- Custom styles for this template --> 
    {!! Html::style('css/navbar.css') !!} 


</head> 

<body> 

<div class="container"> 

    <!-- Static navbar --> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">User Password Operations</a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="inactive"><a href="#">Reset New User</a></li> 
        <li class="inactive"><a href="#">Pending Users</a></li> 
       </ul> 
      </div><!--/.nav-collapse --> 
     </div><!--/.container-fluid --> 
    </nav> 

    <!-- Main component for a primary marketing message or call to action --> 
    <div class="jumbotron"> 
     <h1>Pending 1.0 Users</h1> 
     <p>A list of 1.0 users that have a change!me password as a result of this tool, and are awaiting password change.</p> 
    </div> 
    <table class="table table-bordered"> 
     <tr> 
      <td> 
       <b>Name</b> 
      </td> 
      <td> 
       <b>Email</b> 
      </td> 
      <td> 
       <b>Select</b> 
      </td> 
     </tr> 
     <div id = "user"> 
      <tr v-repeat = "user: v1_user"> 
       <td> 
        @{{ first_name }} 
       </td> 
       <td> 
        @{{ email_address }} 
       </td> 
       <td> 
        <button type="button" class="btn btn-success">Revert Password To Original</button> 
       </td> 
      </tr> 
     </div> 
    </table> 
    <div class="jumbotron"> 
     <h1>Pending 2.0 Users</h1> 
     <p>A list of 2.0 users that have a change!me password as a result of this tool, and are awaiting password change.</p> 
    </div> 
    <table class="table table-bordered"> 
     <tr> 
      <td> 
       <b>Name</b> 
      </td> 
      <td> 
       <b>Email</b> 
      </td> 
      <td> 
       <b>Select</b> 
      </td> 
     </tr> 
     <div> 
      <tr v-repeat = "user: v1_user"> 
       <td> 
        @{{user.first_name}} 
       </td> 
       <td> 
        @{{user.email_address}} 
       </td> 
       <td> 
        <button type="button" class="btn btn-success" v-on= "click: onClick">Revert Password To Original</button> 
       </td> 
      </tr> 
     </div> 
    </table> 
</div> <!-- /container --> 
<!-- Bootstrap core JavaScript 
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<!-- Vue.js file REP --> 
<script src="/js/vue.js"></script> 
<script src="/js/vue-resource.min.js"></script> 
<!-- Main Vue file--> 
<script src="/js/main.js"></script> 

</body> 
</html> 

这里是伴随的JavaScript与Vue.js代码文件:(main.js)

new Vue({ 
    el: "#user", 

    data: 
    { 
     v1_user:[], 
    }, 

    ready : function() 
    { 
     this.fetchV1IntermediaryUsers(); 
    }, 

    methods: 
    { 
     fetchV1IntermediaryUsers: function() { 
      this.$http.get('/api/v1_users',function(v1users) { 
       this.$set('v1_user',v1users); 
      }); 

     } 
    } 
}); 
+0

检查您的浏览器控制台,并发布是否有任何错误。 – chanafdo

+0

添加了上面的截图! – mdobrenko

+1

你有两个不同的部分,使用相同的id'user'。一节不会受Vue影响。用不同的ID或其他方法尝试不同的实例。你是否正确地获得一个部分或者没有一个。 – chanafdo

回答

3

您有多个DIV的具有相同ID的。 HTML中的ID必须是唯一的。当你启动一个VUE实例时,你将它绑定到一个元素上,在这种情况下,它在你的代码中两次。删除ID并添加一个ID到<Body>标签,然后检查您的代码。

+0

谢谢!这让我非常沮丧! – mdobrenko