Почему не отображается
<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>
