Создание карт с модальным для каждой карты из массива с использованием Vue JS - PullRequest
Новая
       84

Создание карт с модальным для каждой карты из массива с использованием Vue JS

0 голосов
/ 21 марта 2019

Я успешно создаю 6 карт из массива, используя v-for. Проблема в том, что я также пытаюсь создать модал для каждой карты, который содержит уникальные данные каждой карты. Например: название карты, ссылка, автор, img, категория внутри модального

Я могу сгенерировать модалы, но он отображает детали первой карты для всех карт.

Вы можете увидеть это, если посмотрите на скрипку.

Как создать модал для каждой карты со своими данными?

Я использую бутстрап 4 

class Project {
    constructor(title, link, author, img, category) {
        this.title = title,
        this.link = link,
        this.author = author, 
        this.img = img,
        this.category = category
    }
}

new Vue({
	el: '#app',
	data: {
        currentFilter: 'ALL',
        projectList: [
            new Project (
                'Ecommerce', 
                '#', 
                'Dessert Tools za', 
                'https://placeimg.com/460/180/any',
                'DESIGN'
          ),
            new Project (
                'BITC Management', 
                'https://digitalassetmanagement.com/', 
                'Widen',
                'https://placeimg.com/420/180/any',
                'DESIGN'
            ),
            new Project (
                'Landing Page', 
                'https://meet-a-geek.today/', 
                'Contenforces', 
                'https://placeimg.com/430/180/any',
                'DEVELOPMENT'
            ),
            new Project (
                'Online Training', 
                'https://www.smarttraining.com/', 
                'Smart Training LCC',
                'https://placeimg.com/440/180/any',
                'DEVELOPMENT'
            ),
            new Project (
                'Univesity & Jobsite Portal', 
                'https://micencostagebank.nl/index_september.php', 
                'Contenforces', 
                'https://placeimg.com/470/180/any',
                'COLABORATION'
            ),
            
            new Project (
                'Product Funnel', 
                'http://prettyexcellent.com/applecider/', 
                'A. A. Ron',
                'https://placeimg.com/480/180/any',
                'DEVELOPMENT'
            )
        ], 
    },

	methods: {
		setFilter: function setFilter(filter) {
			this.currentFilter = filter;
        } 
    }
    
});
.section-subnav {
/* margin: $margin-xl 0; */


} 

.title {
text-align: center;       
/* font-size: $font-lg; */
font-weight:normal;
/* padding: $margin-sm 0; */
}

.submenu {
text-align: center;
/* font-size: $font-sm; */
/* margin-bottom: $margin-md; */

}

.filter {    
padding: 6px 6px;
cursor: pointer;
border-radius: 6px;
transition: all 0.35s;
}

.filter.active {
box-shadow:0px 1px 3px 0px #00000026;
}
.filter:hover {
background:lightgray;
}     

.projects {
display: flex;
flex-wrap: wrap;    
justify-content: center;
}

p {
text-align: center;
/* font-size: $font-sm; */      
}

a {
/* font-size: $font-sm; */
color: #fff;
}

.projects-leave-to{
transform: translatey(30px);
opacity:0;
}

.project {
transition: all .35s ease-in-out;
margin: 0 10px;
width: 250px;
height: auto;
transition: all .35s ease-in-out;	   
}

.project-image {
max-width: 100%;
height: auto;
}

.project-description {
margin: 20px 10px;
text-align: center;    
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app">     


        <section class="section-subnav" id="submenu-sec">
            <h3 class="title">Projects</h3>

            <div class="filters submenu">
                <span class="filter" v-bind:class="{ active: currentFilter === 'ALL' }" v-on:click="setFilter('ALL')">ALL</span>
    
                <span class="filter" v-bind:class="{ active: currentFilter === 'DESIGN' }" v-on:click="setFilter('DESIGN')">DESIGN</span>
    
                <span class="filter" v-bind:class="{ active: currentFilter === 'DEVELOPMENT' }" v-on:click="setFilter('DEVELOPMENT')">DEVELOPMENT</span>
    
                <span class="filter" v-bind:class="{ active: currentFilter === 'COLABORATION' }" v-on:click="setFilter('COLABORATION')">COLABORATION</span>
            </div>
        
       
            <div class="container">          

                <transition-group class="projects" name="projects">               
                    
                    <div class="rounded project" v-if="currentFilter === project.category || currentFilter === 'ALL'" v-bind:key="project.title" 
                        v-for="project in projectList"> 
                        
                         <!-- Modal pop up -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" v-for="project in projectList">
               
                            <div class="modal-dialog" role="document">
                                <div class="modal-content" >
                                        
                                    <div class="modal-header"> 
                                        <img class="project-image " v-bind:src="project.img">  
                                    </div>
                            
                                    <div class="modal-body">
                                            <p class="project-title">{{project.title}}</p>
                                        <h5 class="modal-title" id="exampleModalLongTitle">
                                         
                                        </h5>
                                    
                                    </div>
                                        
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                                    </div>
                                        
                                </div> 
                            </div>
                        </div>
                                                            
                        <div class="border shadow border-ligh project-image-wrapper mb-5">
                                               
                            <img class="project-image " v-bind:src="project.img">                    
                        
                            <div class="project-description">
                                <p class="project-title">{{project.title}}</p>

                                <a :href="project.link" class="btn btn-danger" target="_blank">View Website</a>

                                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">
                                    View Details
                                </button>
                            </div>                           
                        </div>                                           
                    </div>         
                                    
                </transition-group>                
            </div><!-- container end -->          
            
        </section> 
        
    </div>

Вот ссылка на скрипку Jsfiddle

Ответы [ 2 ]

0 голосов
/ 21 марта 2019

Вам нужен уникальный идентификатор в данных.Вы можете присвоить это модальному идентификатору, например 

:id="'myModal'+ project.id"

, в противном случае следуйте инструкциям @Lassi, упомянутым в ответе.

Я разветвил вашу скрипку и передал project.title в цель-идентификатор кнопки Modal ID &&.

 <div class="modal fade" :id="'myModal-'+project.title.replace(/[\W_]+/g,'_')" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" v-for="project in projectList">
......
<button type="button" class="btn btn-danger" data-toggle="modal" :data-target="'#myModal-'+project.title.replace(/[\W_]+/g,'_')">
                                View Details
                            </button>

Fiddle: https://jsfiddle.net/3zv7jope/

Ниже приведен пример индекса 

v-for="(project, index) in projectList" :id="'myModal-'+index"

Fiddle: https://jsfiddle.net/g3u50fpz/

0 голосов
/ 21 марта 2019

Во-первых, у вас есть дубликат v-for, поэтому вы должны удалить v-for из модального элемента.

Ваш модал находится внутри цикла, поэтому для каждого проекта в DOM существует скрытый модальный элемент,Все они имеют одинаковый идентификатор myModal.Когда вы нажимаете кнопку просмотра сведений, отображается первый модальный элемент, относящийся к первому элементу.

Один из способов решить эту проблему - добавить уникальный модальный идентификатор для каждого элемента.Например, если мы хотим использовать индекс элемента в массиве, мы можем добавить следующий способ построения идентификатора:Теперь у каждого элемента есть уникальный идентификатор от myModal0 до myModal5.Когда вы нажмете кнопку «Показать подробности» сейчас, и Bootstrap ищет модал, чтобы открыть его, узнайте, какой правильный модал. 

                    <div class="modal fade" :id="'myModal' + i">
                    <button type="button" :data-target="'#myModal' + i">
...