Vue.js v-for不在应用程序中工作

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

Answer 3

First of all, make sure 'results' is defined in the data section of your Vue instance and you will also have to make sure this 'results' defined is of same data type as that of the data returned by 'list'.

Secondly, I think its better to console log 'this.results' rather than 'list' since its 'this.results' you are looping through and not 'list'

Answer 4

I think it is because you have an extra , after the last entry

{
  "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"
},

]

which results in an empty row

Answer 5

"this" in your success callback does not refer to the vue Instance, it refers to jquery. you should do

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

Answer 6

你必须在安装组件时执行ajax请求，为此使用函数created () {ajax ...}或mounted () {ajax ...}数据将在div的开始v-for之前

Answer 7

you can use computed

 var app = new Vue({ el: '#app', data() { return { results: { "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" }, ] } } }, computed: { items() { return this.results.items; } }, }); 

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <div id="app"> <div v-for="item in items"> <span class="big db">{{item.total_fare}}</span> </div> </div> 

Answer 8

I think you should simply retrieve your availability array in a Vuex prop, then bind it as computed prop in your component; that will make the property reactive and as soon as the api call succeeded you will have the data in the template too.

so, in actions.js

async getAvailabilityArray ({commit}) {
  try {
    const data = await apiService.post('getavailability', {token: 'foo', etc})
    commit('mutateAvailabilityArray', data)
  } catch (err) {
    console.error(err)
  }
}

in component.vue

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

<script>
  import {mapGetters} from 'vuex'
  export default {
    computed: {
      ...mapGetters(['availabilityArray']
    }
  }
</script>

Ooor if not using Vuex, use AsyncComputed prop ( yarn add vue-async-computed )

 <template>
   <div> {{availabilityArray}} </div>
 </template>

 <script>
 export default {
   asyncComputed: {
     async availabilityArray() {
       return await promiseLand()
     }
   },
   methods: {
     promiseLand() {
       return new Promise((resolve, reject) => {
         apiService.post('getavailability', {token: 'foo', etc})
           .then(res => {
             resolve(res)
           }).catch(err => reject(err))
       })
     }
   }
 }
 </script>