Блог

У меня есть список объектов, которые на данный момент содержат только идентификатор и путь:

 export let carList = [  {  id :   id,  path : "img/RedCar.png",  },  {  id :   id,  path : "img/BlueCar.png",  },  {  id :   id,  path : "img/GreenCar.png",  }, ]  

и хотел бы отображать их по одному за раз на основе индекса, который можно увеличивать с помощью кнопок. До сих пор мне удавалось распечатать их все с помощью v-for, но, похоже, я не могу найти способ распечатать только один. Это то, что у меня есть до сих пор:

 lt;templategt; lt;div id="carSelector"gt;  lt;img id="left-arrow" src="img/leftarrow.png"gt;  lt;img id="carPic" v-for="car in cars" :src="car.path" v-bind:key="car.id" /gt;  lt;img id="right-arrow" src="img/rightarrow.png"gt; lt;/divgt; lt;/templategt;  lt;scriptgt; import {carList} from './page-index.js'  export default {  name: "carSelector",  data() {  return {  cars: carList  }  },  methods: {    } } lt;/scriptgt;  

Вы можете взять переменную для поддержания текущего индекса и добавить две функции для переключения между изображениями. Я надеюсь, что это решит вашу проблему.

  lt;templategt;  lt;div id="carSelector"gt;  lt;img id="left-arrow" src="img/leftarrow.png" @click="previous"/gt;  lt;img id="carPic" :src="cars[selectedIndex].path" /gt;  lt;img id="right-arrow" src="img/rightarrow.png" @click="next" /gt;  lt;/divgt; lt;/templategt; lt;scriptgt; import { carList } from "./page-index.js"; export default {  name: "carSelector",  data() {  return {  selectedIndex: 0,  cars: carList,  };  },  methods: {  next() {  if (this.selectedIndex lt; this.cars.length) {  this.selectedIndex  ;  }  },  previous() {  if (this.selectedIndex !== 0) {  this.selectedIndex--;  }  },  }, }; lt;/scriptgt;