I have a list of objects, which for now only contain an id and a path:
export let carList = [
{
id : ++id,
path : "img/RedCar.png",
},
{
id : ++id,
path : "img/BlueCar.png",
},
{
id : ++id,
path : "img/GreenCar.png",
},
]
and would like to display them one at a time based on an index that can be incremented with buttons. So far I have managed to print them all out using v-for but can't seem to find a way to only print one. This is what I have so far:
<template>
<div id="carSelector">
<img id="left-arrow" src="img/leftarrow.png">
<img id="carPic" v-for="car in cars" :src="car.path" v-bind:key="car.id" />
<img id="right-arrow" src="img/rightarrow.png">
</div>
</template>
<script>
import {carList} from './page-index.js'
export default {
name: "carSelector",
data() {
return {
cars: carList
}
},
methods: {
}
}
</script>
You can take a variable to maintain the current index and add two functions to toggle between the images. I hope this solves your problem.
<template>
<div id="carSelector">
<img id="left-arrow" src="img/leftarrow.png" @click="previous"/>
<img id="carPic" :src="cars[selectedIndex].path" />
<img id="right-arrow" src="img/rightarrow.png" @click="next" />
</div>
</template>
<script>
import { carList } from "./page-index.js";
export default {
name: "carSelector",
data() {
return {
selectedIndex: 0,
cars: carList,
};
},
methods: {
next() {
if (this.selectedIndex < this.cars.length) {
this.selectedIndex++;
}
},
previous() {
if (this.selectedIndex !== 0) {
this.selectedIndex--;
}
},
},
};
</script>