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

WebP là gì? Hướng dẫn cách để chuyển hình ảnh jpg, png qua webp

WebP là gì? WebP là một định dạng ảnh hiện đại, được phát triển bởi Google

Điểm khác biệt giữa IPv4 và IPv6 là gì?

IPv4 và IPv6 là hai phiên bản của hệ thống địa chỉ Giao thức Internet (IP). IP l

Check nameservers của tên miền xem website trỏ đúng chưa

Tìm hiểu cách check nameservers của tên miền để xác định tên miền đó đang dùn

Mình đang dùng Google Domains để check tên miền hàng ngày

Từ khi thông báo dịch vụ Google Domains bỏ mác Beta, mình mới để ý và bắt đầ