C
C
chatterbox7772020-10-25 13:31:24
JavaScript
chatterbox777, 2020-10-25 13:31:24

Why is the previous button not showing up?

Why is not displayed

<button v-if="notFirstElement(car.id)">previous</button>
?

<template>
  <div class="flex column">
    <h1>Cars page</h1>
    <div v-for="car in whichCarIsActive" :key="car.id" class="flex header">
      <button v-if="notFirstElement(car.id)">previous</button>
      <span class="header__item"> {{ car.text }}</span>
      <button>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: {
    whichCarIsActive() {
      let activeCar = this.cars.filter((car) => car.active === true);
      return activeCar;
    },
  },
  methods: {
    notFirstElement(elementId) {
      console.log(elementId > 1 ? true : false);
      elementId > 1 ? true : false;
    },
  },
};
</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 the question

In order to leave comments, you need to log in

1 answer(s)
D
Dima Pautov, 2020-10-25
@chatterbox777

notFirstElement(elementId) {
      return elementId > 1 ? true : false;
    },

And in general it should not be a method, but computed
computed: {
  notFirstElement() {
    return (elementId) => elementId > 1;
  },
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question