Vue.js $.ajax() dynamic table when document ready

Question

I'm trying to find a solution with for a table that is populated with $.ajax(), but i can't figure out how i can do this with Vue.js. How can I do that? Do i need a Vue component for that?

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

Justin MacArthur · Accepted Answer · 2017-05-24 16:36:11Z

2

Use the <tr> like a list. Add a v-for="agr in agr1" then you can iterate over the properties you want. when agr1 gets updated it'll render a new list of rows. You can also use v-bind:key="agr.property" to make it so that Vue efficiently renders the elements that get reused.

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

answered May 24, 2017 at 16:36

Justin MacArthur

4,05024 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Timmy Over a year ago

Btw, the actions section has 2 buttons with <img>. I know how could I use it with jQuery, but to put a working button with vue.js? the buttons are also dynamic like the data. And when I click the edit button, it edits the content of the selected row.

Justin MacArthur Over a year ago

It wouldn't be hard so long as each object has the dynamic data needed. <td><img src="action1.png" v-on:click="doFunction1(agr)"><img src="action2.png" v-on:click="doFunction2(agr)"></td>

Timmy Over a year ago

Ah! I understand now! :) another question, after some search, shouldn't the ajax function be inside mounted() instead of methods: {}?

Justin MacArthur Over a year ago

Keep it in methods and call it in mounted that way if you want to have the ability to update the information you can just call the getAll function

Timmy Over a year ago

mounted: function() { getAll(); }, ?

|

Collectives™ on Stack Overflow

Vue.js $.ajax() dynamic table when document ready

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related