Передать значение в route vue js \ quasar Framework

282

17 сентября 2017, 02:24

Есть компонент, который внутри использует v-for:

<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>

Количество элементов заранее не известно, получается с сервера. Есть блок data:

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

Так же есть динамичный роут, в который нужно передать id для получения подробной информации. Никак не могу подступиться к параметру flower.id, чтобы передать его в роут в дальнейшем.

Может быть есть какие-нибудь идеи? Или кто-то знает как это сделать?

Answer 1

Можно вот такие варианты попробовать:

<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>