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

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

SEO Mũ Trắng, Mũ Đen, Mũ Xám: Hiểu Biết và Lựa Chọn Phù Hợp

SEO Mũ Trắng, Mũ Đen, Mũ Xám: Hiểu Biết và Lựa Chọn Phù Hợp Trong kỷ nguyên s