Thêm thẻ div trong 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()

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.

Nguồn: viblo.asia

Bài viết liên quan

Cấu hình Prisma v7 Với Nest.js Mới nhất

Setup Prisma v7 trong Nest.js Bài viết dành cho ai mới học Nest.js và chọn prisma làm OR

Tấn Công Ứng Dụng Web: Mối Đe Dọa Hàng Đầu – Phần 2

viết lại nội dung này ” Phát hiện các cuộc tấn công Cross Site Scripting (XSS)

AI Chatbot 2025: Xu Hướng Tất Yếu Cho Doanh Nghiệp Dẫn Đầu

Giới thiệu AI chatbots đã trải qua một hành trình đáng kể, từ những công cụ t

Tấn Công Ứng Dụng Web: Mối Đe Dọa Hàng Đầu – Phần 1

Tấn công web là gì? Ứng dụng web là các ứng dụng cung cấp dịch vụ cho người