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

我看到了几种处理方法。

计算父级组件中的totalFees，然后通过道具将其提供给子级。这似乎是最快的方法
像现在一样计算儿童中的totalFees，并通过emit触发和触发事件。在父级上监听事件，然后将totalFees添加到flightData中的正确索引中。发出的事件也应该通过flight.id，以便您知道要更新的元素。

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

1 个答案: