There is a component that uses v-for inside:

 <div v-for="flower in flowers" class="catalog"> <p id="flow"><img :src="flower.photo" alt="#" i></p> <center><button id="podr" class="green small round outline" @click="item()">ПОДРОБНЕЕ</button></center> <div id="name1"> <h6 id="zag">{{ flower.name }}</h6> <p id="price1">{{ flower.price }} &#8381;</p> <input type="hidden" :value="flower.id"> </div> </div>

The number of elements is not known in advance; There is a data block:

 data () { return { flowers: [] } }

There is also a dynamic route to which you need to transfer id to get detailed information. I can’t approach the flower.id parameter in flower.id way to transfer it to the route in the future.

Maybe have any ideas? Or does someone know how to do this?

  • What do you mean you can not sacrifice? Take it and pass it) - Eugene Kulakov
  • I do not know how to take it (((for there are 15-20 pieces on their page - Dase2301
  • Hmmm, well, in a cycle, he points to one particular. Do you need to switch to a new route when you click on the 'more' button? Then you can add the link directly to the site, or call the button handler and pass the flower.id - Eugene Kulakov to it.
  • buttons, it turns out exactly the same as the goods, yes, this button needs a new route, with a dynamic parameter, it would be possible to try a cycle, but I do not know the quantity of goods known - Dase2301
  • tried to use the router link, he does not see emelemntov ( - Dase2301

1 answer 1

You can try these options here:

 <div v-for="flower in flowers" class="catalog"> <p id="flow"><img :src="flower.photo" alt="#" i></p> <router-link :to="`path/${flower.id}`">Подробнее</router-link> <router-link :to="{ name: 'details', params: { flowerId: flower.id }}">Подробнее (если нужно передать id пропсы компонента)</router-link> <div id="name1"> <h6 id="zag">{{ flower.name }}</h6> <p id="price1">{{ flower.price }} &#8381;</p> <input type="hidden" :value="flower.id"> </div> </div>
  • Thanks, I will try :) - Dase2301
  • in the router for the route, do not forget to do props: true, if you pass the component as a parameter. - Eugene Kulakov