0

Есть компонент, который внутри использует 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, чтобы передать его в роут в дальнейшем.

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

6
  • Что значит не можете поступиться? Берете его и передаете) 15 сен 2017 в 19:48
  • не знаю, как его взять((( ибо на странице их 15-20 штук
    – Dase2301
    15 сен 2017 в 20:16
  • Ммм, ну в цикле то он указывает на один конкретный. Вам при нажатии на кнопку 'подробнее' нужно на новый роут перейти? Тогда вы можете прямо по месту ссылку добавить, либо вызвать обработчик кнопки и в него передать flower.id 15 сен 2017 в 20:49
  • кнопок, получается ровно столько же, сколько товаров, да, по этой кнопке нужен новый роут, с динамическим параметром, можно было бы циклом попробовать, но я не знаю количество товаров заведомо
    – Dase2301
    15 сен 2017 в 21:07
  • пытался использовать роутер линк, он не видит эмелемнтов(
    – Dase2301
    15 сен 2017 в 21:07

1 ответ 1

0

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

<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>
2
  • спасибо, попробую:)
    – Dase2301
    15 сен 2017 в 21:43
  • в роутере для роута не забудьте props: true сделать, если будете в компонент в качестве параметра передавать. 15 сен 2017 в 21:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.