我试图找到一个用 $.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>
就像一个 list 。添加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>
关于javascript - Vue.js $.ajax() 文档准备好时动态表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44163889/