Why aren't slides switching?

  • 0
    Hello, I don’t understand why the slides are not switching?

    <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>
    JavaScript Eva Bridges, Jun 15, 2019

  • 1 Answers
  • 0
    lol, did not notice that I wrote car.active === true, where it was necessary to assign through = .... the question is cleared
    Levi Baker

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!