基础网格在 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 放在网格之前时，列表显示但卡片不是四张 columns.what 可能是问题所在

Answer 1

您需要将类放在循环 div:

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

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

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

foundation grid not working in vue js template

zurb-foundation

vue.js