Why won't the slides switch?

Question

JavaScript

hello, I don’t understand why the slides don’t switch?

<template>
  <div class="flex column">
    <h1>Cars page</h1>
    <div v-for="car in activeCar" :key="car.id" class="flex header">
      <button v-if="notFirstElement(car.id)">previous</button>
      <span class="header__item"> {{ car.text }}</span>
      <button @click="showNextCarSlide(car.id)">next</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Cars",
  data() {
    return {
      cars: [
        {
          id: 1,
          text:
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam impedit at dicta dolorem nesciunt a sint quidem iusto, accusantium quam ratione! Quo blanditiis nam maiores reprehenderit laudantium dolor ex soluta!",
          carModel: "Lamborghini",
          active: false,
        },
        {
          id: 2,
          text:
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam impedit at dicta dolorem nesciunt a sint quidem iu",
          carModel: "Lamborghini",
          active: true,
        },
        {
          id: 3,
          text:
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam impedit at dicta dolorem nesciunt a sint quidem iusto, accusantium quam ratione! Quo blanditiis nam maiores repr",
          carModel: "Lamborghini",
          active: false,
        },
      ],
    };
  },
  computed: {
    activeCar() {
      let activeCar = this.cars.filter((car) => car.active === true);
      return activeCar;
    },
  },
  methods: {
    notFirstElement(elementId) {
      console.log(elementId > 1 ? true : false);
      return elementId > 1 ? true : false;
    },
    showNextCarSlide(prevCarId) {
      this.cars.forEach((car, id) => {
        if (car.id === prevCarId) {
          car.active = false;
        }
        if (car.id === prevCarId + 1) {
          car.active === true;
        }
      });
    },
  },
};
</script>

<style scoped>
.header {
  margin-top: 100px;
}
.column {
  flex-direction: column;
}
.flex {
  display: flex;
  align-items: center;
}
.flex button {
  height: fit-content;
  margin: 20px;
}
.header__item {
  display: inline-block;
  border: 1px solid grey;
  width: 300px;
}
</style>

Answer 1

lol, I didn't notice that I wrote car.active === true , where it was necessary to assign via =.... the question is removed