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

注意：

定义一个封装返回属性的类

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 ...}数据将在v-for开始div之前}

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

my_int

在component.vue中


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

如果不使用Vuex，请使用AsyncComputed prop（<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>）

yarn add vue-async-computed

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

8 个答案: