Vue.js v-for not working in the application

Question

I have a Vue.js application. I get a list via ajax:

    $.ajax({
    method: 'POST',
    dataType: 'json',
    url: this.base_info.url + 'getavailability?token=' + this.token,
    data: this.search_info,
    success: function (list) {
        this.results = list;
        console.log(list);
    }.bind(this)
});

And here is the result:

{
  "success": "true",
  "error": "false",
  "items": [
    {
      "relation_id": "9961",
      "recommendation_id": "1",
      "combination_id": "3",
      "total_fare": "5530000",
      "quantity_adult": "1",
      "totalfare_adult": "5,530,000",
      "quantity_child": "0",
      "totalfare_child": "0",
      "quantity_infant": "0",
      "totalfare_infant": "0",
      "airlines_name": "Qatar Airways",
      "airline_logo": "QR"
    },
    {
      "relation_id": "9962",
      "recommendation_id": "1",
      "combination_id": "4",
      "total_fare": "5530000",
      "quantity_adult": "1",
      "totalfare_adult": "5,530,000",
      "quantity_child": "0",
      "totalfare_child": "0",
      "quantity_infant": "0",
      "totalfare_infant": "0",
      "airlines_name": "Qatar Airways",
      "airline_logo": "QR"
    },
  ]
}

When I loop through the result via Vue js, it outputs and empty row in my table.

<div v-for="item in results.items">
     <span class="big db">{{item.total_fare}}</span>
</div>

I don't know which part has problems.

Answer 1

In your success handler attach the items like

this.$set('results.items', list);

This might force the digest cycle and in case results.items was not originally declared in your data, they will be evaluated.

Answer 2

The issue you are having is that this within your ajax enclosure does not equate to your Vue js instance. To solve the issue you can do the following just before your ajax call, assign this to a variable

    var vm = this;

     $.ajax({
    method: 'POST',
    dataType: 'json',
    url: this.base_info.url + 'getavailability?token=' + this.token,

    data: this.search_info,
    success: function (list) {
        const json = JSON.parse(list) as DataType_Of_Results;
        vm.results = json;
    }
});

Notes:

1. Define a class that encapsulates the properties returned

   class result{
      relation_id: string,
     recommendation_id: string,
     combination_id: string,
     total_fare: string,
     quantity_adult: string,
     totalfare_adult: string,
     quantity_child: string,
     totalfare_child: string,
     quantity_infant: string,
     totalfare_infant: string,
     airlines_name: string,
     airline_logo: string
   
     }
   

In Data section on you Vue Instance

 data:{
    result: new Array<result>()
    },
    method:{
      getresult: function(){


    var vm = this;

     $.ajax({
    method: 'POST',
    dataType: 'json',
    url: this.base_info.url + 'getavailability?token=' + this.token,

    data: this.search_info,
    success: function (list) {
        const jsonResult = JSON.parse(list) as Array<result>;
        vm.results = jsonResult;
    }
      }
    }