基础网格在vue js模板中不起作用

Question

正在尝试遍历列表并将其显示在具有四张卡片的网格中。

 <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放在网格之前时，列表显示但卡不在四列中。这可能是问题的原因

Answer 1

您需要将您的课程放在循环div上：

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

您的示例代码：https://jsfiddle.net/5b6zkLom/