[英]vue.js data from $.ajax() request not binding to table
I have an $.ajax() function properly working and returning a result and i think i did everything needed for the data binding to go well. 我有一个$ .ajax()函数正常工作并返回结果,我认为我已完成了数据绑定顺利进行的所有工作。
Basically on page load the data from the $.ajax() is appended to a table, but the problem is that the data is not appending like it's supposed to. 基本上在页面加载时,来自$ .ajax()的数据将追加到表中,但是问题是数据没有像预期的那样追加。 Am I missing something? 我想念什么吗?
HTML: HTML:
<div class="row">
<div class="col-md-12 overflow-table">
<table class="table" id="table">
<thead class="head-color thead-inverse">
<tr>
<th style="border-top-left-radius: 10px; border-left:1px solid transparent;">NAME</th>
<th>CLIENT-ID</th>
<th>URL</th>
<th style="border-top-right-radius: 10px; border-right:1px solid transparent;">ACTIONS</th>
</tr>
</thead>
<tbody id='table-redirect'>
<tr class='lightgrey'>
<td contenteditable="true">{{ agr.name }}</td>
<td>{{ agr.client_id }}</td>
<td contenteditable="true">{{ agr.url }}</td>
<td>
<img src="http://mobisteinlp.com/redirect/public/img/edit.svg"><a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'><img src="http://mobisteinlp.com/redirect/public/img/copy.svg"></a>
</td>
</tr>
<tr class='lightgrey'>
<td contenteditable="true">{{ agr.name }}</td>
<td>{{ agr.client_id }}</td>
<td contenteditable="true">{{ agr.url }}</td>
<td>
<img src="http://mobisteinlp.com/redirect/public/img/edit.svg"><a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'><img src="http://mobisteinlp.com/redirect/public/img/copy.svg"></a>
</td>
</tr>
<tr class='lightgrey'>
<td contenteditable="true">{{ agr.name }}</td>
<td>{{ agr.client_id }}</td>
<td contenteditable="true">{{ agr.url }}</td>
<td>
<img src="http://mobisteinlp.com/redirect/public/img/edit.svg"><a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'><img src="http://mobisteinlp.com/redirect/public/img/copy.svg"></a>
</td>
</tr>
<tr class='lightgrey'>
<td contenteditable="true">{{ agr.name }}</td>
<td>{{ agr.client_id }}</td>
<td contenteditable="true">{{ agr.url }}</td>
<td>
<img src="http://mobisteinlp.com/redirect/public/img/edit.svg"><a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'><img src="http://mobisteinlp.com/redirect/public/img/copy.svg"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
JAVASCRIPT: JAVASCRIPT:
//VARIABLES
var url = "http://mobisteinlp.com/redirect/redirect";
agr = 0;
//VUE.JS REDIRECT VIEW MODEL
var redirect = new Vue({
el: '#redirect',
data: {
agr1: []
},
mounted() {
this.getAll(); //DISPLAY TABLE ON PAGE LOAD
},
methods: {
//
getAll: function() {
var self = this;
console.log('teste');
$.ajax({
url: url + "/getAll",
type: "POST",
dataType: "json",
success: function(response) {
console.log(response); //
self.agr1 = response;
console.log(self.agr1);
console.log('success!');
},
error: function() {
console.log('error');
} //end error function
}); //end $.ajax() request
}, //end getAll function
} //end methods
}) //end vue.js instance
You have initialized a property arg1
which is an array[ ] in your data property as follows: 您已初始化数据表中的arg1
属性arg1
,如下所示:
data: {
agr1: [ ]
}
In you ajax cal you are assigning value of arg1
to response as follows: 在ajax cal中,您将arg1
值分配给响应,如下所示:
self.agr1 = response;
So assuming that the response is an array of objects(clients in your case). 因此,假设响应是一个对象数组(在您的情况下为客户端)。 Since complete information is not provided try this: 由于未提供完整的信息,请尝试以下操作:
<tbody id='table-redirect'>
<tr v-for="arg in arg1" class='lightgrey'>
<td contenteditable="true">{{ agr.name }}</td>
<td>{{ agr.client_id }}</td>
<td contenteditable="true">{{ agr.url }}</td>
<td>
<img src="http://mobisteinlp.com/redirect/public/img/edit.svg"><a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'><img src="http://mobisteinlp.com/redirect/public/img/copy.svg"></a>
</td>
</tr>
</tbody>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.