0
Исправлена проблема с объединением Laravel и Vue.js для заполнения таблицы.Проблемы с интеграцией Vue.js и Laravel
По существу, я пытался использовать свойство v-repeat в сочетании с запросом http: get, используя расширение vue-resources. Проблема в том, что никакие значения не проходят через Vue - я просто получаю {{first_name}} и {{email_address}} в скобках.
Я могу подтвердить, что метод API, вызываемый запросом http: get, фактически выплевывает данные (при ручном доступе к 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);
});
}
}
});
Проверьте, есть ли у вас какие-либо ошибки в консоли браузера и отправьте сообщение. – chanafdo
Добавил скриншот выше! – mdobrenko
У вас есть два разных раздела с одинаковым идентификатором 'user'. Vue не влияет на один раздел. Попробуйте разные экземпляры с разными идентификаторами или другим методом. Вы получаете один раздел правильно или ни один. – chanafdo