Vue.js 基础网格不在VUE JS模板中工作

我试着循环浏览一个列表，并用四张卡片将它们显示在一个网格中

 <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>

{{item.name}}

我的计算财产是
计算：{
项目（）{
退回此。$store.getters.getMovies
},
filteredMovie:函数（）{
让自我=这个；
返回此.items.filter（函数（项）{
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；
}
)
}
}
}

---

但是列表没有显示在页面上，但是当我将v-for放在网格之前时，列表显示出来了，但是卡片不在四列中。可能是什么问题呢

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

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

---

示例中的代码：

它们仍然没有显示。请检查您在其中添加的基础类。