VueJS -添加延迟加载到组件v-for
VueJS是一种流行的JavaScript框架，用于构建用户界面。它具有简洁的语法和响应式的数据绑定，使开发人员能够轻松地构建交互式的单页面应用程序。
在VueJS中，v-for指令用于循环渲染组件或元素列表。当需要在组件v-for中添加延迟加载时，可以使用Vue的异步组件和动态导入功能来实现。
异步组件允许将组件的加载推迟到它们实际需要被渲染的时候。这可以提高应用程序的性能，特别是当组件数量较多或组件较大时。
要在组件v-for中添加延迟加载，可以按照以下步骤进行操作：
- 首先，确保你的项目已经安装了Vue的动态导入功能所需的依赖项。可以使用以下命令进行安装：
npm install @babel/plugin-syntax-dynamic-import --save-dev- 在需要延迟加载的组件中，使用动态导入语法来导入组件。例如，假设你有一个名为
MyComponent的组件，可以按照以下方式导入：
const MyComponent = () => import('./MyComponent.vue');- 在使用v-for循环渲染组件的地方，将组件的加载方式更改为异步组件。例如，假设你有一个名为
items的数组，可以按照以下方式渲染组件：
<template>
<div>
<div v-for="item in items" :key="item.id">
<async-component :component="item.component" />
</div>
</div>
</template>
<script>
import AsyncComponent from './AsyncComponent.vue';
export default {
components: {
AsyncComponent
},
data() {
return {
items: [
{ id: 1, component: () => import('./Component1.vue') },
{ id: 2, component: () => import('./Component2.vue') },
// ...
]
};
}
};
</script>在上面的示例中，AsyncComponent是一个包装了异步加载组件的组件。items数组包含了需要渲染的组件及其对应的动态导入语法。
这样，当使用v-for循环渲染组件时，每个组件都会被延迟加载，直到它们实际需要被渲染的时候才会被加载。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云函数（云函数）：https://cloud.tencent.com/product/scf
- 腾讯云云开发（云开发）：https://cloud.tencent.com/product/tcb
- 腾讯云CDN加速（CDN）：https://cloud.tencent.com/product/cdn
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云数据库（CDB）：https://cloud.tencent.com/product/cdb
- 腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云移动开发（移动开发）：https://cloud.tencent.com/product/mob
- 腾讯云区块链（区块链）：https://cloud.tencent.com/product/baas
- 腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
- 腾讯云直播（直播）：https://cloud.tencent.com/product/live
相关·内容
1回答
我一直在尝试用下面的JSON数据格式做动态列表或菜单：
modules: [
{
module_id: 1,
module_parent_id: 0,
module_name: "Module 1",
status: true,
child:
[
{
浏览 1提问于2018-06-26得票数 0
我试图将外部数据/值包含到VueJS中的v-for循环中。不知道该怎么做。基本上，我有以下数据/值：
外部数据
{{ time.one }}
{{ time.two }}
NOTE: I am receiving the data exactly as above as its coming from an API
JSON (自有数据)
{
"persons": [
{
"title": "Prof",
"name": "SomeProf"
},
{
"titl
浏览 9提问于2022-04-23得票数 0
在html中使用以下代码，它可以工作：
<div v-for="i in [1,2,3]" >{{i}}</div>
但在组件模板中使用时：
Vue.component('test', {
template: '<div v-for="i in [1,2,3]" >{{i}}</div>'
})
它将触发一个错误：
- Cannot use v-for on stateful component root element because it renders mul
浏览 0提问于2017-03-19得票数 4
回答已采纳
1回答
我需要执行一个v- for，但是我不知道如何为v-for中的每个不同组件添加一个v-模型；
<template>
<ProfilePasswordField
v-for="(item, index) in profilePasswordItems"
:key="index"
:profilePasswordItem="item"
v-model="???"
>
</template>
这个v-for将永远是三项，我想将v-模型命名为：'p
浏览 3提问于2022-11-24得票数 1
回答已采纳
3回答
Vuejs likers帮助！
我有一个带有图像源的图像循环。下面是代码。
<img :src="'../../'+ photo.path" alt="product" height="207" width="175" v-for="photo in product.photos" v-if="photo.is_primary === 1" />
我应该将这个前缀替换为可重用的基本url。
../../
多么?TY
浏览 1提问于2017-04-25得票数 4
1回答
现在，我们面临着选择JavaScript框架(VueJS)的问题。在我们自己的内部项目Dilly-Dally中，我们面临着输出更大的JSON对象的问题。(近似。15000行json)
我们的计划是将这些数据放在一个表格中，但是看起来VueJS在快速显示如此多的信息方面有点吃力。
我们尝试用普通的文本字段替换输入字段，看看这是否提高了性能，我们也尝试了分页，但也没有解决我们的问题。
因为现在我们有大约20秒的加载时间，当你的浏览器满负荷的时候。
所以现在亲爱的堆栈溢出，我们转向你！你有什么想法来改善加载时间吗？
下面是我们如何制作表格的一个片段。
<b-table striped hove
浏览 1提问于2020-03-17得票数 0
4回答
我正在尝试将JQuery插件owl旋转木马添加到使用Vuejs呈现的列表中。
HTML
<h4>1. Vuejs rendered items with OWL Carousel (not working)</h4>
<div id="user" class="owl-carousel">
<div class="item" v-for="user in users">{{ user.name }}</div>
</div>
<h4>2.
浏览 10提问于2016-08-19得票数 14
回答已采纳
我使用以下片段来呈现列表：
<div @click.prevent="myhandler($event)"><!-- Delegated event handler-->
<div class="tasks" v-for="(task, subName) in step.tasks">
<button type="button">
{{ task.caption }}
</button>
&l
浏览 3提问于2017-05-11得票数 4
回答已采纳
1回答
当向对象添加新键，然后动态修改相关字段时，我遇到了问题。
例如，添加一个新列，将列名设置为" url "，然后尝试更新第1行的url值。
代码：
<table>
<thead>
<tr>
<template v-for="(field, f) in fields">
<th>
<flex-row>
浏览 3提问于2017-09-11得票数 6
回答已采纳
1回答
我有下面的设置和奇怪的类和名称呈现。
<component v-for="item in List"
:item="item"
:class="item.class"
:name="item.name"
</component>
let component = Vue.component('component', {
props: ['item'],
t
浏览 0提问于2020-03-31得票数 0
回答已采纳
2回答
你好，我注意到当数据呈现如下：
<div v-for="post in posts">
<p> {{post.content}} </p>
</div>
<pre>
data () {
return {
posts: [{...},{...}]
}
}
</pre>
当我像这样更新posts数组时：
<pre>
methods: {
addPost: function (post){
this.posts.unshift(post);
浏览 8提问于2019-10-17得票数 0
我的vscode在vuejs v中需要这个属性，如
坏的
<p v-for='person in people'> {{person.name}} </p>
好的
<p v-for='(person, index) in people' :key='index'> {{person.name}} </p>
那么，为什么我们需要:关键属性呢？
浏览 6提问于2017-11-20得票数 6
回答已采纳
5回答
我有一个问题，填充数据从模型到代码时，我有多个模板与单独的数据。我需要的是第一个模板渲染一样多倍的对象在firstFormDetails数组和相同的第二个。下面是我的代码示例：
<div id="app">
<first v-for="item in secondFormDetails" track-by="id"></first>
<second v-for="item in firstFormDetails" track-by="id"></sec
浏览 1提问于2016-10-10得票数 2
这很奇怪。当v-for循环中的元素被单击时，我尝试触发一个方法。但当我使用v-if或v-show时，它不起作用。这是我的HTML代码示例；
<div class="chosen-drop custom_choices" v-if="showResults"> <!-- -->
<ul class="chosen-results">
<li class="active-result level-0 isresult" v-for=
浏览 1提问于2017-03-24得票数 1
1回答
试图理解web (VueJS)中的样式是如何工作的，我正在为一些事情而奋斗：
我正在展示(动态的)一些下拉式(彩色)，充满下拉项目。
我想改变那些下拉项目的背景色。不能真正理解风格是如何运作的。
我的(合乎逻辑的)想法是从父下拉列表继承？
下拉式代码：
<b-dropdown variant="danger" size="sm" v-for="item in rubriquesFullyLoaded" :key="item.id" v-bind:text="item.libelle" id="ddo
浏览 1提问于2018-11-30得票数 0
回答已采纳
1回答
我正在使用Wordpress API，并试图整理一个新的博客系统。我对VueJS有点陌生，我很好奇这类事情是如何处理的。
我能够加载如下最初的博客文章：
let blogApiURL = 'https://element5.wpengine.com/wp-json/wp/v2/posts?_embed&per_page=12'
let authorApiURL = "https://element5.wpengine.com/wp-json/wp/v2/users"
let newPage = 1;
let posts = new Vue({
浏览 1提问于2017-11-02得票数 0
回答已采纳
1回答
如何完美地组织两个vuejs组件之间的数据和交互？例如: 1)我有一个组件
item(v-for="item in items)
a {{item.name}}
2)和第二次
card(v-for="item in items")
div.content
img {{item.photo}}
div {{item.desc}}
button Details
主要的想法是，当我点击列表项目时，我想用相同的id切换卡片，就像list一样。我使用一个文件组成管理从vue webpack模板。
浏览 1提问于2017-12-04得票数 0
2回答
有没有人知道是否可以在v-for循环中使用函数？我想做一些类似的事情：
<div v-for="(stbc, index) in data">
<select>
<option v-for="foo in bar(stbc.arg1, stbc.arg2)" :value="foo">
{{ foo }}
</option>
</select>
</div>
[...]
props: {
Con
浏览 2提问于2018-03-21得票数 5
回答已采纳
1回答
我试图使用下面的来使用axios在vue中填充一个表。
如何添加筛选器和搜索栏？我似乎无法添加v-for="post in posts | filterBy search。其中搜索是<input>的v模型。我看到了一些文档，说明这在vuejs2中是不可用的。除了v-for指令之外，我还可以在<table>标记中使用哪些其他指令来支持vuejs2中的filterBy？
我是否还可以使用axios的另一个指令？
如果我有一个来自rest的结构json，我如何使用像这样的东西并通过解析json来增加值呢？
浏览 4提问于2017-10-05得票数 1
2回答
Vuejs按钮的选择范围
、、、
我有个问题，
我在allow中有一些按钮，我需要允许用户从A到C进行选择，例如，如我在图中所示。此外，用户还可以按一个按钮，例如，D. my v-for，如下所示
<menu-item
v-for="(item, index) in menu"
:key="`item_${index}`"
@click="setMenuItem(index, item.name)"
/>
然后，我有了data属性selectedItems，当用户单击setMenuItem()时，我会添加所有的项。
当用户单击某一项时，该选项可以正
浏览 0提问于2021-08-13得票数 1
回答已采纳
3回答
我希望将v-model设置为由v-for循环中的值指定的值。这是我的密码：
<tr v-for="campaign in _campaigns">
<el-switch v-model="campaign.enabled"></el-switch>
</tr>
现在，如果campaign.enabled === 'active'我想将v模型设置为on，或者如果
campaign.enabled === 'inactive'比off。
我试图以几种方式向v-模型添加逻辑，比如：
浏览 3提问于2017-07-25得票数 1
回答已采纳
1回答
如何在Vuejs中保存和显示选择元素的旧数据？
我的代码如下所示
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
export default {
data() {
return {
selected: "A",
o
浏览 0提问于2020-03-31得票数 0
1回答
因此，我有一个简单的v-for和v中的每一项-for有一个@单击它。
<result-index>
<li v-for="(result, index) in results" @click="getReult(results[index])">
{{ result.name }}
</li>
</result-index>
现在，我的getResult方法只是将结果分配给结果数据：
methods: {
getResult: function(result) {
浏览 0提问于2018-08-21得票数 0
回答已采纳
1回答
我正在寻找一种将v-for中的comment.id发送到计算属性中的用户映像的方法。
<template>
<div>
<div id="comments" v-for="(comment,i) in allcomments">
<div id="comment">
<img class="userimg" :src="userimg" alt="">
浏览 0提问于2019-08-23得票数 0
回答已采纳
1回答
我想根据我通过API提供的数据来呈现一个列表。我做了一个当前输出的屏幕截图。问题是，我无法访问对象属性。加载页面时会出现错误。如何正确访问属性？@{{incident.incidentReference}}没有工作。
<div class="row">
<div class="col-lg-12">
<ibox title="Einsätze">
<table class="table">
<the
浏览 1提问于2017-05-23得票数 1
回答已采纳
我有4个选择：
<div class="form-row">
<div class="form-group col-3">
<label for="stateSelect">Status</label>
<select v-model="filterState" @change="search()" data-live-search="true
浏览 0提问于2020-12-10得票数 2
1回答
我很难解决一个问题。我需要动态加载一些组件。当加载这些组件时，它们会出现错误或没有css样式，这都是因为模板之后的第一个div元素。当编辑DOM和删除这个DIV时，一切都是正确的。但是，VueJS不允许在根中使用v-for。
我使用的是Vuetify组件，所以在某些情况下，Vuetify需要满足您的css类的级别，所以这个DIV不能在组件之间。
有没有办法解决这个问题？
ControlsComponent.vue
<template>
<div>
<div v-for="(component, index) in childs" :ke
浏览 6提问于2020-07-09得票数 0
回答已采纳
4回答
我只想知道是否可以通过vue的关键属性找到DOM元素？我目前正在处理一份名单。我把它通过via指令显示在div上。我将键绑定到元素的索引中。
v-for="(apk, index) in project.apks" v-bind:key="index"
当这些元素从我的服务器获取并显示出来时，如果我能够为它们计算一些内容，这将对我非常有帮助。它只是解析一个文件并查找关键字，并相应地为项目选择一个css类。
问题是，当这些元素被添加到DOM时，我不知道如何为它们调用一个方法。它们是很多html事件，但我找不到一个表示插入dom :(
浏览 0提问于2018-03-13得票数 13
回答已采纳
我有代码作为对象获取图像列表，如
[
{ src: '/path/to/img.jpg', loaded: false },
...
]
以及模板，然后将它们呈现为HTML，类似于：
<div
v-for="image in alltheimages"
:key="image.id" >
<transition name="fade" appear>
<img
:src="image.src"
v-show="image.loaded&#
浏览 4提问于2017-12-26得票数 13
1回答
获取VueJS中当前div的ID
、、、、
我正在通过v-for为我的div生成一个动态id，并且我必须将这个id传递给某个函数。 <div
v-for="(item, index) in items"
:key="index"
:id="'form' + index"
>
<button onclick="function(<id of the div>)"></button>
</div> 我有没有办法做到这一点？
浏览 136提问于2021-01-28得票数 1
回答已采纳
我正在VueJS中创建一个组件递归树。在我的item组件中有这样的行：
<item v-for="i in items" v-model="i"></item>
它很好，但是Vue给了我这个警告：
您正在将v模型直接绑定到v-for迭代别名。这将无法修改v源数组，因为写入别名就像修改函数局部变量一样。考虑使用对象数组，而不是在对象属性上使用v模型。
我对这个警告感到困惑，因为我的应用程序似乎运行良好--我可以添加、移动和删除项目树中的节点。这条错误信息是怎么回事-我该担心吗？
浏览 3提问于2017-03-16得票数 1
在挂载一些html元素时，我如何在VueJS中调用一个方法？
例如：
...
data: [
{
items: [
{text:'item1'},
{text:'item2'}
]
}
]
methods: function() {
myMethod: function(a) {
console.warn(a)
}
}
template: '<div
v-for="item in items"
:key="it
浏览 5提问于2020-01-28得票数 2
回答已采纳
1回答
嗨，我有这个laravel刀片代码
<tr v-for='line , id in edited_lines'>
<td>
@include(
'treats.create_search_and_select',
[
'search_and_select' => 'user_id[]',
'value' => null,
浏览 1提问于2020-04-22得票数 2
回答已采纳
我是Vue.js的新手，我尝试更新一个模板(article.vue)，重复一个组件来显示所有的数据。
在我考试的时候，我用的是假的数据簿。
文件artile.vue是：
<template>
<div>
<article-comp v-for="{book, index } in books" :key="index" :title="book.title"></article-comp>
</div>
</template>
<script>
浏览 0提问于2019-04-05得票数 0
回答已采纳
想要使用
<ul>
<li v-for="user in users.data" :key="user.id">{{ user.name }}</li>
</ul>
<pagination :data="users" @pagination-change-page="getUsers"></pagination>
Vue/Js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.
浏览 0提问于2020-05-14得票数 2
回答已采纳
3回答
我正在试图弄清楚如何让我列出的每个项目都独立隐藏和显示，目前当你打开一个项目时，另一个项目也会打开。我需要使用某种类型的索引吗？我使用v-show，因为我需要内容在手前呈现，并在加载时隐藏，但在点击时显示。
<template>
<div>
<div v-for="item in items" :key="item">
{{ item.title }}
<div v-if="item.examples != null">
浏览 2提问于2019-09-09得票数 2
我有两个文本框网格，如下所示：
目标是用户填写上面的框，然后当他们填写下面的框时，上面的框自动更新。例如，如果您在顶部的第一个框中输入100，然后在底部的第一个框中输入75，则第一个框将变为25。
我尝试使用onchange()，但没有成功。v-model似乎在其双向绑定方面造成了一些问题，这是有道理的。任何帮助都是非常感谢的。
下面是填充输入框的HTML：
> <form v-on:submit.prevent="addNewTask">
<table>
<thead>
<tr>
浏览 0提问于2020-07-22得票数 0
2回答
当最后一次触发事件时，我试图访问组件的道具。这个组件来自。
它有几个道具，如名称、值等。当触发更改时，我希望能够获得开关的名称或值。
更重要的是，如何访问触发更改事件的开关的任何道具？
我试过了但我不清楚。
<div v-for="organizer in organizers>
<el-switch @change="changeOrganizers($event.target.name, $event.target.value)" :name="organizer.name">
</el-switch
浏览 5提问于2017-01-31得票数 3
回答已采纳
2回答
我编写这个函数是为了按状态类型进行筛选。它正在工作，但每次我过滤表数据行时，都会消失。有两种状态(活动状态和完成状态)我为过滤器编写了这段代码，
<div class="DropContent">
<label class="LabelView">Status</label><br />
<select class="dropdown-size form-contro
浏览 7提问于2022-05-27得票数 0
回答已采纳
我一直在使用我几年前创建的数据表组件，它呈现一个二维数组。我可以对列进行排序、分页、过滤。整个过程真的很快。最近，我尝试使用了webpack，并为我的数据表创建了一个合适的.vue组件。请注意，相同的代码，但是现在执行排序、分页和过滤的性能要慢得多。是不是和webpack有什么原因导致了反应性性能的大幅下降？ 简单的代码示例-- <table>
<tr v-for="row in pagedData">
<td v-for="column in columns">
{{row[column.prope
浏览 7提问于2020-08-26得票数 0
回答已采纳
HelloWorld.vue
<template>
<div>
<b>Vuejs dynamic routing</b>
<div v-for="item in items" :key="item.id">
<b>{{ item.id }}.</b>
<router-link :to="{ name: 'UserWithID', params:
浏览 1提问于2021-12-09得票数 1
回答已采纳
2回答
我有一张有不同宽度的柱子的桌子。我使用粘性标题来计算列的宽度。
现在，我编写了一个函数，通过双击标题来增加列的宽度。这适用于第一次双击。但是如果我点击它4或6次，在第一次双击之后什么也不会发生。如何重新设置事件，以便在再次单击2次之后再次触发该事件？
当我移动鼠标时，我可以一个接一个地做几次双击。但这不是目标。
下面是代码片段：
<th
v-for="c in data.columns"
v-if="visiblecolumns.includes(c)"
v-on:dblclick="COLUMN_DEFINITION[c]+=5
浏览 2提问于2018-08-30得票数 2
回答已采纳
2回答
循环中的VueJS组件充当一个
、、、、
UPDATE能够使它工作，但最后一个问题。更新后的代码如下：
我一直试图找出一种方法，使循环中的组件不起作用。
我有一个循环(3div)，在循环中，我有两个文本框。但是，每当我在其中任何一个中输入一个值时，都会向每个人填充该值。
有人能帮我把这些部件分开吗？
我试图使父div (第1循环)动态。因此，子组件(第二循环)应该与他们自己的祖父母组件(textbox)分开操作。
这是我的密码：
<div id="app">
<div v-for="(ctr, c) in 3" :key="c">
<b
浏览 5提问于2020-02-04得票数 1
回答已采纳
1回答
当我更改页面时，表单的错误仍然存在，当我更改页面时，我希望它们消失，而当我返回页面时，我总是查看它们。我该怎么做？
这些都是我的错误
<template>
<b-form @submit="onSubmit">
<div v-if="getError">
<div v-for="(_errors, key) in getError">
<b-alert
v-for="error in _errors"
show
vari
浏览 4提问于2021-12-22得票数 -1
我试图使用内联模板，我有下拉菜单，但它是混乱的事情切换之间的状态。这是我在主模板中使用的代码：
<div>
<article v-for="(game, index) in games">
<dropdown ref="dropdown" inline-template>
<a v-for="(branch, index) in game.branches" :key="'branch' + index" :href="branch.link">{{
浏览 3提问于2020-07-01得票数 1
2回答
我有以下代码，我使用两个组件，一个名为Moustaches，另一个称为Moustache
我正试图用一个(一个v-for )来显示络腮胡中的小胡子数据。
我没有得到任何数据或任何错误，胡子 html显示在源代码中，但没有显示Moustache数据。
<div id="app">
<moustaches>
<moustache name="The Burgundy" img="/img/the-burgundy.jpg"></moustache>
<mo
浏览 8提问于2016-12-06得票数 0
回答已采纳
1回答
我想(暂时)实现我所说的伪分页。
我有一个填充了大量数据的表。我使用AJAX获得了整个数据集，但是表很大。
我的问题是:我如何实现一些东西来显示表的前10项，然后如果我点击第2页，它将把项从11移到21，依此类推……
<!-- component template -->
<script type="text/x-template" id="grid-template">
<table>
<thead>
<tr>
<th v-for="key in
浏览 21提问于2017-02-10得票数 0
回答已采纳
1回答
在VUEJS上有没有办法在所有加载后一起自动播放多个HTML5视频？他们有“自动播放”属性，但玩起来有些滞后。
<div
class="video-box"
v-for="(item, index) in videoArr"
:key="index"
@click="playVideo"
>
<video
class="video-box img-ab
浏览 63提问于2021-03-02得票数 1
1回答
我有一个父组件，使用v-for指令创建子组件：
<div class="planlist">
<ul id="planOl">
<PlanLego
v-for="action in store.plan"
:v-if="action !== activeStep"
:action_id="action.act_id"
:actor="action.actor"
:blocked=&#
浏览 3提问于2022-11-15得票数 0
回答已采纳
我想在keyup上向DB发出即时请求。问题是:我不能清除以前ajax请求的结果，即使我清除了包含它的数组，当我更快地输入它时，它也不起作用。
第二个(较小的:D)问题是，我必须创建嵌套循环才能使其工作。
我花了很多时间来解决这些问题……
组件1: HTML
<input v-model="invoice_number" type="text" name="invoice_number" class="form-control" id="" placeholder="Invoice number
浏览 4提问于2017-09-15得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
