emilov
@emilov
Фрилансер

Как вывести значение цикла в модальнок окно во VUE?

Всем привет! изучаю VUE не давно, но уже успел понять минимальный концепт...
Имеется 2 компонента, родительский и другой с модальной окной, по умолчанию там пусто кроме белого блока для вывода информации, в родительском компоненте имеется цикл со свойствами изображение и название..

Вопрос как следует вывести эти свойства в модальное окно, так чтоб они не дублировались и выводились по ID?

<div class="stars p_t">
    <div class="heading">
        <h2><i class="fas fa-info-circle"></i> Выгодные предложения</h2>
    </div>
    <div class="stars_slider">
        <div class="container">
            <div class="row">
                <div class="col-md-4" v-for="item in starsItem" :key="item.id">
                    <div class="item">
                        <div class="img">
                            <img :src="item.itemImg" class="img-responsive" alt="">
                            <span class="price">{{item.price + ' сом'}}</span>
                            <div class="eye" @click="showModal = true">
                                <i class="fas fa-search-plus"></i>
                            </div>
                            <span class="id">{{'ID ' + item.itemId}}</span>
                        </div>
                        <div class="param">
                            <h3 class="heading_item">
                                {{item.heading}}
                            </h3>
                            <div class="param-list">
                                <div>
                                    <i class="fas fa-map-marker-alt"></i>
                                    <strong>Адрес:</strong>
                                    <span>{{item.addr}}</span>
                                </div>
                                <div>
                                    <i class="fas fa-superscript"></i>
                                    <strong>Площадь:</strong>
                                    <span>{{item.param}}</span>
                                </div>
                                <div>
                                    <i class="fas fa-bed "></i>
                                    <strong>Кол-во комнат:</strong>
                                    <span>{{item.room}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <popup v-if="showModal" @close="showModal = false">
    </popup>
</div>
  • Вопрос задан
  • 94 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы