Сетка фундамента не работает в шаблоне vue js - PullRequest
Новая
       13

Сетка фундамента не работает в шаблоне vue js

0 голосов
/ 19 января 2020

Я пытаюсь l oop просмотреть список и отобразить их в виде сетки с четырьмя карточками. 

 <div class="grid-x movies">
                    <div  v-for="item in filteredMovie" :key="item.id">
               <div class="cell large-4 medium-3 small-12">
                <div class="card">

                <img v-bind:src="item.cover_image" style="height:100px;width: 100px">

                  {{ item.name }}<br/>
                </div>
               </div>
my computed property is


computed:{
            items(){
                return this.$store.getters.getMovies
            },
            filteredMovie:function(){
                let self= this;
                return this.items.filter(function(item){
                    return item.name.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
                        || item.cast.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
                        || item.genre.toLowerCase().indexOf(self.search.toLowerCase()) >= 0;
                    }
                )
            }

        }

    }

                </div>

, но список не отображается на странице, но когда я ставлю v-for до сетки показывается список, но карточки не в четырех столбцах. в чем может быть проблема

1 Ответ

0 голосов
/ 19 января 2020

Вы должны поместить свои классы в цикл: 

<div class="cell large-4 medium-3 small-12" v-for="item in filteredMovie" :key="item.id">

Ваш код в образце: https://jsfiddle.net/5b6zkLom/

...