vue.js數據從$ .ajax（）請求不綁定到表

Question

我有一個$ .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 

Answer 1

您已如下初始化一個屬性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>