[英]Vue.js $.ajax() dynamic table when document ready
我正在嘗試為填充$ .ajax()的表找到解決方案,但是我不知道如何使用Vue.js來實現。 我怎樣才能做到這一點? 我是否需要Vue組件?
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'>
</tr>
<tr class='lightgrey'>
</tr>
<tr class='lightgrey'>
</tr>
<tr class='lightgrey'>
</tr>
</tbody>
</table>
</div>
VUE.JS腳本:
//VUE.JS REDIRECT PAGE
//VARIABLES
var url = "http://mobisteinlp.com/redirect/redirect";
agr = 0;
//VUE.JS REDIRECT VIEW MODEL
var app = new Vue({
el: '#redirect',
delimiters:['{', '}'],
data: {
agr1:[]
},
methods: {
//FUNCTION TO DISPLAY TABLE ON PAGE (RE)LOAD
getAll: function() {
console.log('teste');
$.ajax({
url: url + "/getAll",
type: "POST",
dataType: "json",
success:function(response){
console.log(response);//
this.agr1=response;
console.log(this.agr1);
console.log('success!');
},
error:function(){
console.log('error');
}//end error function
});//end $.ajax() request
},//end getAll function
}//end methods
})//end vue.js instance
像列表一樣使用<tr>
。 v-for="agr in agr1"
添加v-for="agr in agr1"
然后可以迭代所需的屬性。 當agr1
更新時,它將呈現一個新的行列表。 您還可以使用v-bind:key="agr.property"
進行創建,以便Vue有效地呈現要重用的元素。
<tbody id='table-redirect'>
<tr
v-for="agr in agr1"
v-bind:key="agr.id"
class='lightgrey'
>
<td>{{ agr.name }}</td>
<td>{{ agr.client_id }}</td>
<td>{{ agr.url }}</td>
<td>{{ agr.actions }}</td>
</tr>
</tbody>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.