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

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

7 Cách Tăng Tốc Ứng Dụng React Hiệu Quả Mà Bạn Có Thể Làm Ngay

React là một thư viện JavaScript phổ biến trong việc xây dựng giao diện người d

Trung Quốc “thả quân bài tẩy”: hàng loạt robot hình người!

MỘT CUỘC CÁCH MẠNG ROBOT ĐANG HÌNH THÀNH Ở TRUNG QUỐC Thượng Hải, ngày 13/5 –

9 Mẹo lập trình Web “ẩn mình” giúp tiết kiệm hàng giờ đồng hồ

Hầu hết các lập trình viên (kể cả những người giỏi) đều tốn thời gian x