这两天在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" οnclick="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'], },