Yêu cầu thg 10 14, 2022 12:53 SA 117 0 1
  • 117 0 1
0

Thêm thẻ div trong foreach Vue.js

Chia sẻ
  • 117 0 1

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" :data-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" :data-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.

Mình viết lại mã sau :

<div v-if="!isLoading" class="owl-carousel state-slider" id="state-slider">
                    <template v-for="(item, key) in data" :key="item.id" v-if="!isLoading && data.length">

                        <div class="re-slider-item">
                            <div class="re-li-div" v-if="!(key % '5')">
                            
                            <template v-if="key == '1' || key == '3' || key == '6' || key == '8'">
                                <div class="re-li-div re-grid">
                            </template>
                             <div>
                                        <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">{{ item.count }}</span>
                                            </div>
                                            <img class="thumb img-fluid" :data-src="item.image" :src="item.image" :alt="item.name" :title="item.name">
                                        </a>
                                    
                            </div> 
                            <template v-if="key == '2' || key == '4' || key == '7' || key == '9'">
                                   </div>
                            </template>
                           </div v-if="!(key % '5')">
                        </div>

                    </template>
                </div>

Mã trên

Giá trị KEY = 0KEY = 5 cho ra KẾT QUẢ, còn lại KEY = 1 2 3 4 6 7 8 9 không ra kết quả

v-if="key == '1' || key == '3' || key == '6' || key == '8'" và v-if="key == '2' || key == '4' || key == '7' || key == '9'" không hoạt động được

Avatar MR LUFFY @kuanglee97
thg 10 17, 2022 4:40 SA

1 CÂU TRẢ LỜI


Đã trả lời thg 10 14, 2022 2:31 SA
Đã được chấp nhận
0

Vue có hỗ trợ bind class. Bạn tìm hiểu thử, chứ mình nghĩ k nên dùng v-if trong trường hợp này.

Chia sẻ
Avatar MacKen @MacKen
thg 10 14, 2022 4:25 SA

Mình đổi qua v-bind:key="key" đoạn mã

<template v-for="(item, key) in data" v-bind:key="key" v-if="!isLoading && data.length">

Thì áp dụng thẻ html class ok còn lại thẻ < Div > và < /Div > không hoạt động .

Avatar MacKen @MacKen
thg 10 14, 2022 4:55 SA

CODE"

<template v-for="(item, key) in data" v-bind:key="key" v-if="!isLoading && data.length">

                        <template v-if="!(key % 5)">
                        <div class="re-slider-item">
                                <div class="re-li-div">
                        </template>

                        <template v-if="(key == 1 && key == 3 && key == 6 && key == 8)">
                       <div class="re-slider-item">
                                <div class="re-li-div  re-grid">
                        </template>

                        <template v-if="(key % 5)">
                             <div>
                        </template>


                            <a :href="item.url" :title="item.name" class=" '' + (key % 5 ? 're-first-slider' : 're-first-slider') >
                                <div class="re-name-and-count">
                                    <span class="re-name">{{ item.name }}</span>
                                    <span class="re-count"></span>
                                </div>
                                <img class="thumb img-fluid mx-auto lazy" :data-src="item.image" :src="item.image" :alt="item.name" :title="item.name">
                            </a>

                        <template v-if="(key % 5)>
                                </div>
                        </template>

                        <template v-if="(key == 2 && key == 4 && key == 7 && key == 9)" >
                                </div> 
                        </div> 
                        </template>

                        <template v-if="!(key % 5)">
                                </div>
                        </div>
                        </template>

</template>

Mã trên mình npm run production báo lỗi : Module not found: Error: Can't resolve 'key%20%25%20'5'&'

Bạn có thể giúp mình xem lỗi chỗ chỗ nào và rút ngắn lại mã trên được không ? xin cảm ơn

NẾU XUẤT RA thì đúng như mã html dưới đây


KEY=0
  <div class="re-slider-item"><div class="re-li-div">
   <a>..............</>
  </div></div>

KEY= 1 v 2

  <div class="re-slider-item"><div class="re-li-div re-grid">
   <div>
   <a>..............</>
   </div>
   <div>
   <a>..............</>
   </div>
  </div></div>

KEY= 3 v 4

  <div class="re-slider-item"><div class="re-li-div re-grid">
   <div>
   <a>..............</>
   </div>
   <div>
   <a>..............</>
   </div>
  </div></div>

KEY=5
  <div class="re-slider-item"><div class="re-li-div">
   <a>..............</>
  </div></div>

BÌNH THƯƠNG MÃ DƯỚI NÀY HOẠT ĐỘNG TỐT NGƯỢC LẠI BÊN VUE,JS MÌNH CHƯA LÀM ĐƯƠC

@foreach($items as $key=>$item)

                            @if (!($key % 5))
                                <div class="re-slider-item">
                                    <div class="re-li-div">
                            @endif   
                 
                            @if (($key == 1) || ($key == 3) || ($key == 6) || ($key == 8))
                                <div class="re-slider-item">
                                    <div class="re-li-div re-grid">
                            @endif     
                            
                            @if ($key % 5)
                            <div id="{{$key}}">
                            @endif 

                                                <a>
                                                 NOI DUNG
                                                </a>

                            @if ($key % 5)
                            </div>
                            @endif 

                            @if (($key == 2) || ($key == 4) || ($key == 7) || ($key == 9))
                                    </div>
                                </div>
                            @endif   
                            
                            @if (!($key % 5)) 
                                    </div>
                                </div>
                            @endif 

@endforeach
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí