Vue.js $ .ajax（）文檔準備就緒時的動態表格

Question

我試圖找到一個與$ .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 SCRIPT：

//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 

Answer 1

使用<tr>像一個列表。添加一個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>