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

Question

我有一個Vue.js應用程序。 我通過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)
});

這是結果：

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

當我通過Vue js遍歷結果時，它輸出並在我的表中清空行。

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

我不知道哪個部分有問題。

Answer 1

在您的成功處理程序中附加類似的項目

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

這可能會強制使用摘要周期，如果最初未在數據中聲明results.items，則會對其進行評估。

Answer 2

您遇到的問題是，您的ajax機箱中的這個不等於您的Vue js實例。 要解決此問題，您可以在ajax調用之前執行以下操作，將其分配給變量

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

筆記：

1. 定義一個封裝返回屬性的類

    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 } 

在Vue實例的數據部分中

 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

首先，確保在Vue實例的數據部分中定義“結果”，並且還必須確保定義的“結果”與“list”返回的數據的數據類型相同。

其次，我認為更好地控制日志'this.results'而不是'list'，因為'this.results'你循環而不是'list'

Answer 4

我想這是因為你在最后一次參賽后還有一個額外的

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

]

這導致空行

Answer 5

你成功回調中的"this"並不是指vue實例，它指的是jquery。 你應該做

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

你可以用計算機

 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

我認為你應該只是在Vuex道具中檢索你的可用性數組，然后將它作為計算道具綁定在你的組件中; 這將使該屬性被激活，並且一旦api調用成功，您也將在模板中獲得數據。

所以，在actions.js中

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

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

如果不使用Vuex，請使用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>