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