Vue在jsp中使用渲染数量问题

这两天在jsp中使用vue，发现通过ajax请求后push的数据渲染数量没有问题，但是在不用ajax请求时渲染数量不对

组件:box': {
                template: `<i-col span="4" class="box" :data-id="data.id"  onclick="showDetail(this)" style="cursor: pointer;">
            <img class="avatar" :src="data.imgPath" v-if="data.img"/>
            <div v-if="!data.img">{{data.solt}}</div>
            <h1 class="name">{{data.name}}</h1>
            <div class="description">{{data.description}}</div>
           </i-col>`,
   props: ['data'],
},
<box v-for="(i, index) in dataResult" :data="i"></box>

 

box渲染出来的数量受上一组dataResult数组中个数的影响，在测试的过程中发现数据没有问题，加上class就有问题了，因此是因为组件样式的原因导致，换种样式即可

'box': {
                    template: `<i-col span="4" :class="{box: true}" :data-id="data.id"  onclick="showDetail(this)" style="cursor: pointer;">
                                  <img class="avatar" :src="data.imgPath" v-if="data.img"/>
                                  <div v-if="!data.img">{{data.solt}}</div>
                                  <h1 class="name">{{data.name}}</h1>
                                  <div class="description">{{data.description}}</div>
                              </i-col>`,
                    props: ['data'],
                },