Как отфильтровать v-for по условию сравнения значений с другого массива?

Question

[kmv-dev]

<template>
    <div class="home" v-for="station of stations" :key="station.id" >
        <h1>{{ station.name }}</h1>
        <ul>
            <li v-for="car of car_filter" :key="car.id">{{ car.name }}</li>
        </ul>
    </div>
</template>

<script>
const axios = require('axios');

export default {
    name: 'Home',
    data() {
        return {
            stations: [],
            cars: []
        }
    },
    mounted() {
        Promise.all([
            axios.get(`http://localhost:3000/stations`),
            axios.get(`http://localhost:3000/cars`)
        ]).then(([stations, cars]) => {
            this.stations = stations.data;
            this.cars = cars.data;
        });
    },
    computed: {
        car_filter: function () {
            return this.cars.filter( function () {
                return this.stations.name === this.cars.address;  ----- такая конструкция не работает
            })
        }
    }
}
</script>

в db.json создал двумерный массив с данными. Во втором массиве из 2х добавил ключ с значением которое встречается в первом массиве чтобы потом сравнить их и выводить только данные которые совпали.
Подскажите как вывести только тот car.name который прошел проверку stations.name === cars.address?

Answer 1

[0xD34F]

computed: {
  stationsWithCars() {
    return this.cars.reduce(
      (acc, n) => (acc[n.address]?.cars.push(n), acc),
      Object.fromEntries(this.stations.map(n => [ n.name, { station: n, cars: [] } ]))
    );
  },
},

<div v-for="{ station, cars } in stationsWithCars" :key="station.id">
  <h1>{{ station.name }}</h1>
  <ul>
    <li v-for="car in cars" :key="car.id">{{ car.name }}</li>
  </ul>
</div>

Comments

[kmv-dev]

подскажите пожалуйста, как теперь именно отфильтрованных car сложить значения?

computed: {
        stationsWithCars() {
            return this.cars.reduce(
                (acc, n) => (acc[n.address]?.cars.push(n), acc),
                Object.fromEntries(this.stations.map(n => [ n.name, { station: n, cars: [] } ]))
            );
        },
        carsSumGas() {
            return this.cars.reduce((s, i) => s = s + i.count, 0)
        }
    },

[0xD34F]

kmv-dev, а сразу посчитать, при группировке - нет, никак? Добавить рядом с cars: [] ещё свойство - sum: 0, а рядом с push'ем, соответственно, плюсовать текущий count.

[kmv-dev]

0xD34F, просто не понимаю как ваша функция работает и console.log не посмотреть что где лежит

stationsWithCars() {
            return this.cars.reduce(
                (acc, n) => (acc[n.address]?.cars.push(n), n.count++, acc),
                Object.fromEntries(this.stations.map(n => [ n.name, { station: n, cars: [], sum: 0 } ]))
            );
        },

[kmv-dev]

kmv-dev, подскажите если не сложно

[0xD34F]

kmv-dev,

stationsWithCars() {
  return this.cars.reduce(
    (acc, n) => {
      const item = acc[n.address];
      if (item) {
        item.cars.push(n);
        item.sum += n.count;
      }

      return acc;
    },
    Object.fromEntries(this.stations.map(n => [
      n.name,
      {
        station: n,
        cars: [],
        sum: 0,
      }
    ]))
  );
},

[kmv-dev]

0xD34F, Спасибо