Сортировать массив по вычисляемому объекту Child in Vue

Question

Я использую Vue для отображения списка результатов поиска для рейсов. Когда пользователь ищет рейсы, я получаю flightData, который я передаю определенные данные компонентам в качестве реквизита. Внутри компонента я использую вычисленные свойства, чтобы получить totalPrice.

Я бы хотел отсортировать компоненты на родительской странице по этому 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);
    }
},

// Компонент полета

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

Answer 1

Я вижу несколько способов справиться с этим.

1. Вычислите totalFees в родительском компоненте и затем передайте его через подпорки дочерним компонентам. Это кажется самым быстрым способом
2. Вычислить totalFees у детей, как сейчас, огонь и событие через emit . Прослушайте событие для родителя и добавьте totalFees к правильному индексу в flightData. Передаваемое событие также должно пройти flight.id, чтобы вы знали, какой элемент нужно обновить.