Javascript Vue.js$.ajax（）文档就绪时的动态表

我试图为一个填充了$.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 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

像列表一样使用

。添加一个

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>

{{agr.name}
{{agr.client_id}
{{agr.url}
{{agr.actions}

像列表一样使用

。添加一个

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>

{{agr.name}
{{agr.client_id}
{{agr.url}
{{agr.actions}

顺便说一句，操作部分有两个按钮，带有。我知道如何在jQuery中使用它，但在vue.js中使用一个工作按钮？按钮也像数据一样是动态的。当我点击编辑按钮时，它会编辑所选行的内容。只要每个对象都有所需的动态数据，这并不难<代码>啊！我现在明白了！：）另一个问题是，经过一些搜索后，ajax函数是否应该在

mounted（）

中而不是

methods:{}

？将其保存在

methods

中，并以

mounted

的方式调用它如果您希望能够更新信息，可以调用

getAll

函数

mounted:function（）{getAll（）；}，

？顺便说一句，actions部分有两个按钮。我知道如何在jQuery中使用它，但要在vue.js中放置一个工作按钮？这些按钮也和数据一样是动态的。当我单击edit按钮时，它会编辑所选行的内容。只要每个对象都有所需的动态数据，就不难了。

啊！我知道现在倒立！：）另一个问题是，经过一些搜索之后，ajax函数不应该在

mounted（）

中而不是

methods:{}

？将其保存在

方法中

并以这种方式调用

装入的

，如果您希望能够更新信息，只需调用

getAll

函数

mounted:function（）{getAll（）；}，

？