[英].net core 2.1 binding array in ajax request from axios and Vue.js
[英]vue.js data from $.ajax() request not binding to table
我有一个$ .ajax()函数正常工作并返回结果,我认为我已完成了数据绑定顺利进行的所有工作。
基本上在页面加载时,来自$ .ajax()的数据将追加到表中,但是问题是数据没有像预期的那样追加。 我想念什么吗?
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:
//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
您已初始化数据表中的arg1
属性arg1
,如下所示:
data: {
agr1: [ ]
}
在ajax cal中,您将arg1
值分配给响应,如下所示:
self.agr1 = response;
因此,假设响应是一个对象数组(在您的情况下为客户端)。 由于未提供完整的信息,请尝试以下操作:
<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.