Thêm thẻ div trong foreach Vue.js

Laravel

Mình lấy 5 bài viết ra từ file .vue với mã sau :

<div v-if="!isLoading" class="owl-carousel" id="owl-slider"> <template v-for="item in data" :key="item.id" v-if="!isLoading && data.length"> <a :href="item.url" :title="item.name" class=""> <div class="re-name-and-count"> <span class="re-name">{{ item.name }}</span> <span class="re-count"></span> </div> <img class="thumb img-fluid" :data-src="item.image" :src="item.image" :alt="item.name" :title="item.name"> </a> </template>
</div>

<script> export default { data: function() { return { isLoading: true, data: [] }; }, mounted() { this.getData(); }, props: { url: { type: String, default: () => null, required: true }, show_empty_string: { type: Boolean, default: () => false }, }, methods: { getData() { this.data = []; let url = this.url; this.isLoading = true; axios.get(url) .then(res => { this.data = res.data.data ? res.data.data : []; this.isLoading = false; }) .catch(() => { this.isLoading = false; console.log(res); }); }, } }
</script>

Với mã trên mình muốn thêm thẻ div và đóng thẻ div lại trước <a> và sau </a>.

Ví dụ :

> > <div v-if="!isLoading" class="owl-carousel" id="owl-slider">
> > <template v-for="item in data" :key="item.id" v-if="!isLoading && data.length">
> > > > Nếu id =1 <div class="1">
> > Nếu id =2 và id= 3 <div class="2">
> > > > <a :href="item.url" :title="item.name" class="">
> > <div class="re-name-and-count">
> > <span class="re-name">{{ item.name }}</span>
> > <span class="re-count"></span>
> > </div>
> > <img class="thumb img-fluid" :data-src="item.image" :src="item.image" :alt="item.name" :title="item.name">
> > </a>
> > > > Nếu id =1 </div>
> > Nếu id =2 và id= 3 </div>
> > > > </template>
> </div>

Xin hãy giúp tôi giải quyết vấn đề này. Cảm ơn trước.

Mình viết lại mã sau :

<div v-if="!isLoading" class="owl-carousel state-slider" id="state-slider"> <template v-for="(item, key) in data" :key="item.id" v-if="!isLoading && data.length"> <div class="re-slider-item"> <div class="re-li-div" v-if="!(key % '5')"> <template v-if="key == '1' || key == '3' || key == '6' || key == '8'"> <div class="re-li-div re-grid"> </template> <div> <a :href="item.url" :title="item.name" class=""> <div class="re-name-and-count"> <span class="re-name">{{ item.name }}</span> <span class="re-count">{{ item.count }}</span> </div> <img class="thumb img-fluid" :data-src="item.image" :src="item.image" :alt="item.name" :title="item.name"> </a> </div> <template v-if="key == '2' || key == '4' || key == '7' || key == '9'"> </div> </template> </div v-if="!(key % '5')"> </div> </template> </div>

Mã trên

Giá trị KEY = 0 và KEY = 5 cho ra KẾT QUẢ còn lại KEY = 1 2 3 4 6 7 8 9 không ra kết quả

v-if="key == '1' || key == '3' || key == '6' || key == '8'" và v-if="key == '2' || key == '4' || key == '7' || key == '9'" không hoạt động được