ran bit of problem combining laravel , vue.js populate table.
essentially, trying use v-repeat property in combination http:get request using vue-resources extension. problem no values appear getting passed through vue - {{first_name}} , {{email_address}} in brackets.
i can confirm api method called http:get request in fact spitting out data (manually accessing url in browser reveals data).
here code in routes.php file responsible outputting data:
get('api/v1_users',function() { return app\user::all()->tojson(); }); and here spits out in browser:
[{"email_address":"test123@gmail.com,"first_name":"john","password":"test123"}] the chrome console displays no errors nor warnings.
here blade file:
<!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"> <!-- above 3 meta tags *must* come first in head; 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 bootstrap</title> <!-- bootstrap core css --> <link media="all" type="text/css" rel="stylesheet" href="{{ url::asset('css/bootstrap.min.css') }}"> <!-- custom styles 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 primary marketing message or call action --> <div class="jumbotron"> <h1>pending 1.0 users</h1> <p>a list of 1.0 users have change!me password result of tool, , 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 original</button> </td> </tr> </div> </table> <div class="jumbotron"> <h1>pending 2.0 users</h1> <p>a list of 2.0 users have change!me password result of tool, , 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 original</button> </td> </tr> </div> </table> </div> <!-- /container --> <!-- bootstrap core javascript ================================================== --> <!-- placed @ end of document 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> here accompanying javascript file vue.js code: (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); }); } } });
you have multiple div's same id's. id's in html must unique. when start vue instance bind element, in case in code twice. remove id's , add id <body> tag, check code.
Comments
Post a Comment