Tengo una lista de objetos, que por ahora solo contienen una identificación y una ruta:
export let carList = [ { id : ++id, path : "img/RedCar.png", }, { id : ++id, path : "img/BlueCar.png", }, { id : ++id, path : "img/GreenCar.png", }, ]y me gustaría mostrarlos uno a la vez según un índice que se puede incrementar con botones. Hasta ahora he logrado imprimirlos todos usando v-for pero parece que no puedo encontrar la manera de imprimir solo uno. Esto es lo que tengo hasta ahora:
<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>Puede tomar una variable para mantener el índice actual y agregar dos funciones para alternar entre las imágenes. Espero que esto resuelva tu problema.
<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>