[Vuejs]-How to use iterativa data path in v-for loop (Vue)

0👍

You’ve to bind variable data into your src as follow

  <div v-for="(p,i) in products" :key="i">
<img :src="`./assets/room${str(i)}.jpg`" class = "room-img">
<h4 @click="modelFlag = true">{{products[i]}}</h4>
<p>{{prices[i]}}</p>
<button @click="increase(i)">sign</button> 

You can perform/do above as follow too:
:src="'./assets/room'+str(i)+'.jpg'"

And it will works.
:src and v-bind:src work in same way

Reference

https://vuejs.org/api/built-in-directives.html#v-bind

Leave a comment