Sorting 在Vue中按子计算属性对数组排序_Sorting_Vue.js_Vuejs2_Vuex_Nuxt.js

Sorting 在Vue中按子计算属性对数组排序

sorting vue.js vuejs2

Sorting 在Vue中按子计算属性对数组排序,sorting,vue.js,vuejs2,vuex,nuxt.js,Sorting,Vue.js,Vuejs2,Vuex,Nuxt.js,我正在使用Vue显示航班的搜索结果列表。当用户搜索航班时，我会得到flightData，我会将某些数据作为道具传递给组件。在组件中，我使用计算的属性来获取总价格我想按此totalPrice对父页面上的组件进行排序，但我不确定如何访问此信息 //index.vue <v-flex v-for="flight in filteredFlights" :key="flight.id" xs10 offset-xs1 class="my-2"> <Flights

我正在使用Vue显示航班的搜索结果列表。当用户搜索航班时，我会得到

flightData

，我会将某些数据作为道具传递给组件。在组件中，我使用计算的属性来获取

总价格

我想按此

totalPrice

对父页面上的组件进行排序，但我不确定如何访问此信息

//index.vue

    <v-flex v-for="flight in filteredFlights" :key="flight.id" xs10 offset-xs1 class="my-2">
      <Flights
        :id="flight.id"
        :price="flight.price"
        :flyFrom="flight.flyFrom"
        :flyTo="flight.flyTo"
        :flyDuration="flight.fly_duration"
        :returnDuration="flight.return_duration"
        :routes="flight.route"
      />
    </v-flex>


computed: {
    filteredFlights() {
      // right now this only sorts by price, not the totalPrice in the components
      return this.flightData.sort((a, b) => b.price - a.price);
    }
},


计算：{
filteredFlights（）{
//现在，这只是按价格排序，而不是组件中的总价格
返回此.flightData.sort（（a，b）=>b.price-a.price）；
}
},

//飞行部件

<template>
  <v-card hover id="flightCard" class="d-inline-flex pa-3 ma-2" :href="deeplink" target="_blank">
    <v-flex xs12 sm3 class="ml-3 mt-3">
      <v-layout column fill-height>
        <v-flex class="title">
          ${{price}}
          <span class="caption">Flights</span>
        </v-flex>
        <v-flex class="title">
          ${{fees}}
          <span class="caption">Fees</span>
        </v-flex>
        <v-divider></v-divider>
        <v-flex class="display-1 mt-2">
          ${{totalPrice}}
        </v-flex>
      </v-layout>
    </v-flex>
  </v-card>
</template>

  computed: {
    fees() {
      let totalFee = 0;
      // code to get fees
      return totalFee
    },
    totalPrice() {
      return this.price + this.fees;
    }
  },


${{price}
飞行
${{fees}
费用
${{totalPrice}
计算：{
费用（）{
设totalFee=0；
//获取费用的代码
返回总费用
},
总价{
返回此.price+此.fees；
}
},

我看到了几种处理方法

在父组件中计算

totalFees

，然后通过道具将其提供给子组件。这似乎是最快的方法

计算儿童的

totalFees

，如现在一样，通过发射和事件。侦听父级上的事件，并将

totalFees

添加到

flightData

中的正确索引中。发出的事件还应通过

flight.id

，以便您知道要更新的元素