Vue js-根据当前时间显示列表中的元素

Question

我从API接收对象（行程）列表，我想检查是否有满足以下逻辑的行程对象：

旅行对象由-> startTime，estimateTime，begin，目的地组成

逻辑：如果行程满足startTime + estimatedTime < currentTime，则显示组件。

当前正在显示列表中的所有行程：

    <div class="col-xs-24">
        <Loading :data="passengerTrips" :hideOnEmpty="true">
            <h2 slot="title" > Trips which im going</h2>
            <div class="trips-list">
                <Trip v-for="trip in passengerTrips" :trip="trip" :user="user"></Trip>
            </div>
        </Loading>
    </div>

<script>
    watch: {
    passengerTrips: function () {
        this.updateScroll();
    },
    computed: {
    ...mapGetters({
        passengerTrips: 'myTrips/passengerTrips'
    }),
</script>

我是新手，所以任何建议都会受到赞赏。

Answer 1

开始时间，估计时间，开始，目的地

您可以在商店中使用吸气剂：

getters: {
  ...,
  tripsOnTime: state => {
    const currentTime = new Date(); // Format the time based on your requirements
    // return only the trips that meet the condition
    // Validation to check if trip is not undefined/null
    return state.trips.filter(trip => trip && trip.startTime + trip.estimatedTime < currentTime
  },
  ...
}

现在您可以添加它：

<script>
  watch: {
    passengerTrips: function () {
      this.updateScroll();
    },
  computed: {
    ...mapGetters({
    passengerTrips: 'myTrips/passengerTrips',
    tripsOnTime: 'myTrips/tripsOnTime',    
  }),
</script>

我在验证中添加了trip：

return state.trips.filter(trip => trip && trip.startTime + trip.estimatedTime < currentTime

如果要检查每个属性，则可以使用&&运算符，对对象使用hasOwnProperty方法。