V-for not displaying records after his has fetched on console

Question

I have init the array ArtificialInsemination[] on response received but its not showing or loading the records in the table. When I click the button its calls the functions viewRecords and sends the HTTP request successfully, but not loading into the table.

<div id="ArtificialInsemination" class="container">
        <button v-on:click="viewRecords">View Record</button>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Cow Id</th>
                <th>Bull Name</th>
                <th>Semen Origin</th>
                <th>Insemination Time</th>
                <th>Pd Delivery Date</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for ="artificialInseminationRecord in artificialInseminationRecords">
                <td>{{ artificialInseminationRecord.cowId }}</td>
                <td>{{ artificialInseminationRecord.bullUsedName }}</td>
                <td>{{ artificialInseminationRecord.semenOrigin }}</td>
                <td>{{ artificialInseminationRecord.inseminationTime }}</td>
                <td>{{ artificialInseminationRecord.pdStatusDate }}</td>
            </tr>
            </tbody>
        </table>
    </div>

This is the vue

  <script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>

<script>
    //class initialization

    var ArtificialInsemination = new Vue({
        el:'#ArtificialInsemination',
        data: {
            url:'http://localhost/dairyfarm/index.php',
            artificialInseminationRecords: []

        },
        //invoke methods
        methods: {
          viewRecords:function () {
              var data = new FormData()
              data.append('function','viewRecords')
              axios.post(this.url,data)
                  .then( function (response ) {
                  this.artificialInseminationRecords = response.data.data
              }).catch(function (error) {

              })

            },
            created: function(){
              this.viewRecords()

            }
        }
    })

</script>

score 1 · Answer 1 · answered Oct 28 '17 at 11:13

You have a scoping issue, this inside a callback refers to the execution context of the callback not the Vue instance. You need to either assign this to something outside the callback:

// assign this to self
var self = this;
axios.post(this.url,data)
  .then( function (response ) {
      self.artificialInseminationRecords = response.data.data
}).catch(function (error) {

})

Or use an arrow function which do not create their own execution context:

axios.post(this.url,data)
  .then( response => {
      this.artificialInseminationRecords = response.data.data
}).catch(function (error) {

})

score 1 · Answer 2 · answered Oct 28 '17 at 11:16

1

You decided to use created event, but you defined it as a method. :)

Look at this sample: Async Data Mutation inside of Created Event

answered Oct 28 '17 at 11:16

Yaser Khahani

685
7
15

score 1 · Answer 3 · answered Oct 28 '17 at 11:21

1

We only needed to add bind like this

   viewRecords:function () {
          var data = new FormData()
          data.append('function','viewRecords')
          axios.post(this.url,data)
              .then( function (response ) {
              this.artificialInseminationRecords = response.data.data
          }.bind(this)).catch(function (error) {

          })

        }

answered Oct 28 '17 at 11:21

Laureen Toroitich

63
2
3
7

If you're using ES2015 I recommend that you use the arrow function option. It was introduced to prevent you having to bind `this` all over the place, which can be a little verbose. – craig_h Oct 28 '17 at 11:30

V-for not displaying records after his has fetched on console

3 Answers3