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

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 循环遍历结果时，它在我的 table.

中输出空行

<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

首先，确保 'results' 定义在你的 Vue 实例的数据部分，你还必须确保这个 'results' 定义的数据类型与'list'.

返回的数据

其次，我认为控制台日志 'this.results' 而不是 'list' 更好，因为它 'this.results' 你正在循环而不是 'list'

Answer 3

我认为这是因为你在最后一个条目之后有一个额外的 ,

{
  "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 4

您遇到的问题是 ajax 附件中的 this 不等同于您的 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封装返回的属性

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

我认为您应该简单地在 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>

Ooor 如果不使用 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>

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

Vue.js v-for not working in the application

javascript

ajax

jquery

vue.js