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