Fatal编程技术网
  • laravel/
  • Laravel VueJS-将延迟加载添加到组件v-for

Laravel VueJS-将延迟加载添加到组件v-for

laravel vue.js vuejs2

Laravel VueJS-将延迟加载添加到组件v-for,laravel,vue.js,vuejs2,vue-component,Laravel,Vue.js,Vuejs2,Vue Component,我想在我的网站上增加加载时间。我现在有一个我所有项目的列表，所有项目都在第一页加载。我想实现对这些组件的延迟加载，但我似乎找不到一种方法来实现 我有一个名为项目卡的组件： <project-card v-bind:project="project" v-bind:key="project.id" v-if="projects" v-for="project in filteredProjects"><

我想在我的网站上增加加载时间。我现在有一个我所有项目的列表，所有项目都在第一页加载。我想实现对这些组件的延迟加载，但我似乎找不到一种方法来实现

我有一个名为
项目卡的组件
：

<project-card v-bind:project="project" v-bind:key="project.id" v-if="projects" v-for="project in filteredProjects"></project-card>
模板文件：

<template>
    <div class="project-card rounded dark:bg-gray-800 bg-white overflow-hidden shadow-lg rounded-lg flex flex-col relative">
        <img class="w-full h-64 object-cover" :src="'/uploads/' + project.image" alt="">
        <div class="px-6 py-4 h-full flex flex-col">
            <div class="project-info block min-h-8">
                <div class="w-full">
                    <p class="tracking-widest text-xs title-font font-medium dark:text-white text-gray-500 mb-1">{{ project.language }}</p>
                </div>
            </div>
            <div class="project-language flex-1">
                <div class="w-5/6 float-left">
                    <p class="font-bold dark:text-white gilroy text-xl">{{ project.name }}</p>
                </div>
            </div>
            <div class="project-description flex-2 space-y-4 py-3 h-full">
                <p class="dark:text-white ">{{ project.description | str_limit(128) }}</p>
            </div>
            <div class="read-more mt-auto">
                <div class="flex items-center flex-wrap ">
                    <button type="button" @click="openModal" class="font-bold text-sm text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out hover:text-indigo-900 read-more-button flex items-center focus:outline-none">
                        Lees meer <span class="read-more-arrow ml-2">→</span>
                    </button>
                    <span class="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">

                    </span>
                    <span class="text-gray-600 inline-flex items-center leading-none text-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-1">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                        </svg>
                        {{ project.stargazers_count }}
                    </span>
                </div>
                <project-card-modal :project="project" ref="projectModal"></project-card-modal>
            </div>
        </div>
    </div>
</template>

<script>
    import projectCardModalComponent from "./projectCardModalComponent";

    export default {
        components: {
            projectCardModalComponent
        },
        methods: {
            openModal() {
                this.$refs.projectModal.show = true;
            }
        },

        props: ['project']
    }
</script>



{{project.language}


{{project.name}


{{project.description | str_limit（128）}

利斯梅尔→
{{project.stargazers_count}
从“/projectCardModalComponent”导入projectCardModalComponent；
导出默认值{
组成部分：{
projectCardModalComponent
},
方法：{
openModal（）{
此.$refs.projectModal.show=true；
}
},
道具：[“项目”]
}
目前，它看起来像这样，所以它给出了一个想法，它应该如何变成。但是我想实现对这个组件的延迟加载。我怎样才能做到这一点

APP.JS

import Vue from "vue";

require('./bootstrap');

window.Vue = require('vue');

Vue.component('project-card', require('./components/projectCardComponent.vue').default);
Vue.component('project-card-modal', require('./components/projectCardModalComponent.vue').default);
Vue.component('contact-form', require('./components/contactFormComponent.vue').default);
Vue.component('contact-form-flash', require('./components/contactFormFlashComponent.vue').default);
Vue.component('project-language-filter-button', require('./components/projectLanguageButtonFilterComponent.vue').default);
Vue.component('project-language-filter-dropdown', require('./components/projectLanguageDropdownFilterComponent.vue').default);
Vue.component('education', require('./components/educationComponent.vue').default);
Vue.component('work-experience', require('./components/workExperienceComponent.vue').default);

Vue.component('sidebar', require('./components/dashboard/dashboardSidebarComponent.vue').default);
Vue.component('projects', require('./components/dashboard/dashboardProjectsComponent.vue').default);

import MugenScroll from 'vue-mugen-scroll'

const app = new Vue({
    el: '#app',
    data: {
        showModal: false,
        projects: [],
        filteredProjects: [],
        languages: [],
        languageFilterKey: 'all',
        workExperiences: [],
        educations: [],

        search: '',
        pageSizeBegin: 0,
        pageSizeEnd: null,

        projectsLoading: false,
    },
    mounted: function() {
        this.getProjects();
        this.getWorkExperiences();
        this.getAllEducations();
        this.getProjectLanguages();
    },
    created() {
        this.getFilteredProjects();
    },
    methods: {
        getProjects: function() {
            axios.get('/api/get/projects')
                .then(response => {
                    this.filteredProjects = this.projects = response.data
                }).catch(err => {
                console.log(err)
            });
        },
        getFilteredProjects: function() {
            for(let i = 0;  i < 6; i++) {
                let count = this.filteredProjects.length + i
            }
        },
        getProjectLanguages: function() {
            axios.get('/api/get/project/languages')
                .then(response => {
                    this.languages = response.data
                }).catch(err => {
                console.log(err)
            });
        },
        selectedLanguage: function() {
            if(this.languageFilterKey !== null) {
                this.languages.forEach((item) => {
                    item.active = item.language === this.languageFilterKey;
                });
            } else {
                this.languageFilterKey = null
            }
        },
        filterProjectsByLanguage () {
            if(this.languageFilterKey === 'all') {
                this.filteredProjects = this.projects;
            } else {
                this.filteredProjects = this.projects.filter((project) => {
                    return this.languageFilterKey === project.language
                });
            }
        },
        getWorkExperiences: function() {
            axios.get('/api/get/workexperiences')
                .then(response => {
                    this.workExperiences = response.data
                }).catch(err => {
                console.log(err)
            });
        },
        getAllEducations: function() {
            axios.get('/api/get/educations')
                .then(response => {
                    this.educations = response.data
                }).catch(err => {
                console.log(err)
            });
        },
        amountOnChange(event) {
            if(!event.target.value) {
                this.pageSizeEnd = null;
            } else {
                this.pageSizeEnd = event.target.value;
            }
        }
    },
    computed: {
        filteredList() {
            if(!this.pageSizeEnd) {
                return this.projects.filter((project) => {
                    return  project.name.toLowerCase().includes(this.search.toLowerCase()) || project.language.toLowerCase().includes(this.search.toLowerCase())
                })
            }
            return this.projects.filter((project) => {
                return  project.name.toLowerCase().includes(this.search.toLowerCase()) || project.language.toLowerCase().includes(this.search.toLowerCase())
            }).slice(this.pageSizeBegin, this.pageSizeEnd)

        },
    }
})

Vue.filter('str_limit', function (value, size) {
    if (!value) return '';
    value = value.toString();

    if (value.length <= size) {
        return value;
    }
    return value.substr(0, size) + '...';
});


从“Vue”导入Vue；
需要（'./引导'）；
window.Vue=require（'Vue'）；
Vue.component（'project-card'，require（'./components/projectCardComponent.Vue'）。默认值）；
Vue.component（'project-card-modal'，require（'./components/projectCardModalComponent.Vue'）。默认值）；
组件（'contact-form'，require（'./components/contactFormComponent.Vue'）。默认值）；
组件（'contact-form-flash'，require（'./components/contactFormFlashComponent.Vue'）。默认值）；
组件（'project-language-filter-button'，require（'./components/projectLanguageButtonFilterComponent.Vue'）。默认值）；
组件（'project-language-filter-dropdown'，require（'./components/projectLanguageDropdownFilterComponent.Vue'）。默认值）；
Vue.component（'education'，require（'./components/educationComponent.Vue'）。默认值）；
Vue.component（'work-experience'，require（'./components/workExperienceComponent.Vue'）。默认值）；
组件（'sidebar'，require（'./components/dashboard/dashboardSidebarComponent.Vue'）。默认值）；
组件（'projects'，require（'./components/dashboard/dashboardProjectsComponent.Vue'）。默认值）；
从“vue mugen scroll”导入MugenScroll
const app=新的Vue({
el:“#应用程序”，
数据：{
showModal：错，
项目：[]，
筛选项目：[]，
语言：[]，
languageFilterKey:'全部'，
工作经历：[]，
教育：[]，
搜索：“”，
pageSizeBegin:0，
pagesizend:null，
项目阅读：错误，
},
挂载：函数（）{
这个.getProjects（）；
这是getWorkExperiences（）；
这个。getAllEducations（）；
这是.getProjectLanguages（）；
},
创建（）{
这个.getFilteredProjects（）；
},
方法：{
getProjects:function（）{
axios.get（'/api/get/projects'）
。然后（响应=>{
this.filteredProjects=this.projects=response.data
}).catch（错误=>{
console.log（错误）
});
},
getFilteredProjects:function（）{
for（设i=0；i<6；i++）{
让计数=this.filteredProjects.length+i
}
},
getProjectLanguages:function（）{
axios.get（“/api/get/project/languages”）
。然后（响应=>{
this.languages=response.data
}).catch（错误=>{
console.log（错误）
});
},
selectedLanguage:function（）{
if（this.languageFilterKey！==null）{
this.languages.forEach（（项）=>{
item.active=item.language===this.languageFilterKey；
});
}否则{
this.languageFilterKey=null
}
},
filterProjectsByLanguage（）{
if（this.languageFilterKey=='all'）{
this.filteredProjects=this.projects；
}否则{
this.filteredProjects=this.projects.filter（（项目）=>{
返回此.languageFilterKey===project.language
});
}
},
getWorkExperiences:function（）{
axios.get（“/api/get/workexperiences”）
。然后（响应=>{
this.workExperiences=response.data
}).catch（错误=>{
console.log（错误）
});
},
getAllEducations:function（）{
axios.get（“/api/get/educations”）
。然后（响应=>{
this.educations=response.data
}).catch（错误=>{
console.log（错误）
});
},
AmontonChange（事件）{
如果（！event.target.value）{
this.pagesizend=null；
}否则{
this.pagesizend=event.target.value；
}
}
},
计算：{
过滤器列表（）{
如果（！this.pagesizend）{
返回此.projects.filter（（项目）=>{
返回project.name.toLowerCase（）.includes（this.search.toLowerCase（））| | project.language.toLowerCase（）.includes（this.search.toLow