Why isn't the previous button displayed?

  • 0
    Why is
    <button v-if="notFirstElement(car.id)">previous</button>
    not displayed?

    <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>
    JavaScript Joshua Jennings, Jan 2, 2020

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




    In general, it should not be a method, but computed

    computed: {
    notFirstElement() {
    return (elementId) => elementId > 1;
    },
    }
    Anonymous

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