Vue.js:是否保存v-for的索引？
在Vue.js中，v-for指令用于循环渲染列表。默认情况下，不会保存v-for的索引，但是我们可以通过特殊的语法来保存索引。
要保存v-for的索引，可以使用以下语法：
<div v-for="(item, index) in items" :key="index">
{{ index }} - {{ item }}
</div>在上述代码中，(item, index)表示同时获取每个元素的值和索引。然后，我们可以在模板中使用{{ index }}来显示索引。
需要注意的是，使用索引作为key绑定时，需要确保列表中的项不会发生顺序变化或动态增删，否则可能会导致渲染错误。更好的做法是使用具有唯一标识的属性作为key。
Vue.js官方文档中关于v-for的更多信息可以在以下链接中找到： https://cn.vuejs.org/v2/guide/list.html
相关·内容
4回答
如何在Vue.js中获得v-for索引？
vue.js
我有一个Vue组件，像下面这样：
<div v-for="item in items" :key="there I want get the for-loop index" >
</div>
...
data(){
items: [{name:'a'}, {name:'b'}...]
}
当我在vue.js中执行for-循环时，如何获得索引？
浏览 2提问于2018-04-05得票数 109
回答已采纳
5回答
如何在vue.js中中断v-for循环？
javascript、vue.js
我在我的vue.js应用程序中使用了这个v-for循环： <div v-for="(word, index) in dictionary">
// break if index > 20
<p>{{word}}</p>
</div> 我想在渲染20个单词后跳出循环。我怎样才能做到这一点呢？我看了看docs，但没有看到任何关于这方面的内容。
浏览 443提问于2017-08-01得票数 10
回答已采纳
2回答
为什么不总是使用索引作为vue.js for循环中的键呢？
javascript、indexing、vue.js、key、v-for
我已经在几个项目中使用了vue.js，并且一直使用索引作为for循环中的键
<div v-for="(item, index) in items" :key="index"></div>
...and已经开始怀疑这是否有问题，因为示例通常使用项目的ID。
<div v-for="(item, index) in items" :key="item.ID"></div>
浏览 1提问于2017-06-14得票数 24
回答已采纳
2回答
Vue.js按id编辑帖子
html、vue.js
我从vue.js开始，我正在阅读，以帮助我用v-for从DB加载一些帖子。
在每个帖子下面都有Edit和Delete按钮。我可以通过ID正确地删除每个帖子。我也可以打开input来正确地编辑帖子标题。
但是当我点击保存按钮时，我不能保存input更改。它返回到初始文本。
当我点击编辑时，它会打开所有的inputs标题。
有没有办法打开特定的帖子标题，并在保存后保留更改？
<div id="app" class="row mb-50">
<div v-for="(item, index) in tours" v-bind:
浏览 15提问于2020-05-12得票数 0
2回答
VueJS内联模板和其中的v-for
vue.js
我试图使用内联模板，我有下拉菜单，但它是混乱的事情切换之间的状态。这是我在主模板中使用的代码：
<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回答
Vue.js偶数编号行格式设置
vue.js
使用vue.js，我尝试用一类浅橙色做奇数行，用一类或绿色做偶数行
在我的模板中，我有
<div class="col-md-3" v-for="m in menu">\
<div class="menu-item light-orange">{{#if Math.abs($index % 2)}}\
<a href="#feature-modal" data-toggle="modal">\
浏览 0提问于2016-05-21得票数 10
回答已采纳
1回答
基于数组列表的图像显示/隐藏
javascript、vue.js
我有一个标签列表和一个选定标签列表：
data () {
return {
tags: ['#tag1', '#tag2', '#tag3'],
selectTags: ['#tag1', '#tag2', '#tag3'],
images: {}
}
},
使用它们，我创建了一个复选框循环：
<div v-for="tag in tags" :key="tag">
<input
浏览 2提问于2019-11-21得票数 1
回答已采纳
1回答
如何在道具和数据中定义数组列表
vue.js、vue-component
在我的项目中，我使用vue.js。
我想用嵌套循环显示列表的内容。在父页面中，我定义了：
<template>
<div>
<detail-header></detail-header>
......
<detail-list></detail-list>
</div>
</template>
详细清单的组成部分是：
<template>
<div>
<div v-for="(item, index) of list&#
浏览 0提问于2018-09-13得票数 0
回答已采纳
3回答
“v-bind”指令需要属性值
javascript、vue.js
我试图用vue.js创建某种类型的树，但却遇到了元素道具的问题。请帮帮我。 我试过:content="{{tempCont}}"，也试过content="{{tempCont}}"，但都不管用。 下面是我使用tree元素的地方： <div id="tree">
<treeItem :title="Parent" :content="{{tempCont}}"></treeItem>
</div> 下面是整个tree元素： <template>
浏览 22提问于2019-01-17得票数 14
回答已采纳
2回答
如何在vue.js中通过api渲染数据
javascript、api、vue.js、rendering
我是vue.js的新手，我将使用API制作一个新闻应用程序。在这里，我使用v-for来迭代一些代码。我认为v-for有问题。因为它会产生错误。错误已包含在此问题的末尾。我使用以下代码来显示搜索结果 <template>
<div class="col-md-12">
<div>
<h2>Results</h2>
<div class="card mb-3" v-for="item in resultL
浏览 31提问于2020-10-07得票数 0
回答已采纳
2回答
Vue js不能从嵌套的v-for连接项。
html、vue.js
我从Vue.js开始，并根据条目id/索引阅读了关于splice()的文章。如果我尝试在“splice()”v-for中添加一个条目，它就会正常工作。
data:{
tours: null,
},
methods: {
deleteTour: function (id) {
if (confirm('Are you sure?')) {
const index = this.tours.findIndex(item => item.id === id);
if (~index) {
axios.post(&#
浏览 5提问于2020-05-27得票数 1
回答已采纳
1回答
[Vue warn]：无法解析组件: Step1Item：
vue.js、vue-component
当我试图在一个组件中的一个组件上使用v-for指令时，我得到了上面的错误。
这是对存储在参与者中的一些数据进行工作和迭代
<template>
<div
v-for="(participant, index) in participants"
v-bind:key="index"
>
hello world
</div>
</template>
但是更改为这个会给出上面的错误。
<template>
<Step
浏览 12提问于2020-11-15得票数 2
回答已采纳
2回答
Vue复制粘贴功能，Vue列表呈现
javascript、vue.js、vuejs2、vue-component
当我在输入字段中输入一些文本，然后点击enter，用一个标题为"Copy“的按钮添加到列表中，现在当我单击旁边的输入时，我希望它复制该输入。
但是它只复制索引为1的元素。
您可以运行以下代码
请检查一下，让我知道有什么问题。
谢谢
new Vue({
el: "#app",
data: {
myInput: '',
items: []
},
methods: {
AddNew() {
this.items.push(this.myInput)
this.myInput= "
浏览 21提问于2020-09-10得票数 0
回答已采纳
1回答
vuejs如何在v-for中增加值
svg、vuejs2
我厌倦了用vue.js渲染svg线图，这是我的代码。
<template lang="html">
<div class="">
<div v-for="(scorex,key) in score">
<p>{{x += 50}}</p>
</div>
<svg height="500" width="500" style="background-color:silver;"&
浏览 2提问于2018-04-11得票数 0
1回答
引导下拉按钮不显示V-For元素
javascript、twitter-bootstrap、vue.js、drop-down-menu、vuejs3
我有以下Vue.js (3)组件，它使用Bootstrap (5)：
<template>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle btn-link text-decoration-none text-dark" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-haspopup="
浏览 2提问于2022-06-11得票数 0
1回答
如何访问在angularjs中调用ng-重复的组件中的索引？
javascript、angularjs、angularjs-ng-repeat
我有以下文件。这是节点-list.html中的代码。
<tbody sv-node-list-item ng-repeat="item in items" />
这是节点列表-item.html中的代码。
<tr><td>{{$index}}</td></tr>
基本上，节点列表项是为节点-list.html文件的ng重复的每一次迭代呈现的。我需要从父目录中访问该项目的索引，即节点-list-item.html中的节点-list.html，我已经研究了很长一段时间，但无法这样做。请帮帮忙。我使用的是angular1，即
浏览 1提问于2019-09-16得票数 0
回答已采纳
1回答
Vuejs触发器单击下一个孩子
vue.js、toggle、v-for
我有一个简单的v-for，几乎没有项目和按钮。如何将单击事件触发到v-for中的下一项？
模板
<div class="card" v-for="(card, card_index) in cards)">
<div class="item" :class={'active': active === card_index + 'key'}
@click="toggleActive(index)">{{ card.name }}
</div
浏览 0提问于2018-09-03得票数 0
3回答
React:键对于列表以外的任何情况都有用吗？
javascript、arrays、reactjs
在渲染列表时，我可以找到使用键突出显示的所有信息，例如：
<ul>
{array.map((item, index) => <li key={index}>{item}</li>)}
</ul>
除了列表之外，是否还存在提供密钥也有帮助的情况？
简单地为页面上的每个非静态元素提供键有什么缺点吗？
浏览 1提问于2019-03-27得票数 2
2回答
使用v更改所有选择的Vue.js
javascript、html、vue.js
我从vue.js开始，循环遍历一些用户，并在引导cols中列出它们。cols的数量将随着注册用户的数量而增加。
每个col都有来自每个用户的数据，并且在每个用户col中有一个select。
这些select根据用户的ID来填充他们的帖子。
所以我有v-for在v-for里面。
v-for用于发布用户v-for中的帖子的select。
我的问题是，当我更改select option时，它会为所有其他用户更改所有selects。
是否有一种方法只改变用户的select，而我确实在改变呢？
html：
<div class="row" id="app">
浏览 4提问于2020-05-15得票数 0
回答已采纳
5回答
vuejs v-用于每5个项目添加一次引导行
javascript、twitter-bootstrap、vue.js
我有一个项目数组，比如'Item 1'，'Item 2‘直到'Item 25’。我希望渲染后的HTML看起来像这样： <div class="row">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</div>
<div class=
浏览 37提问于2017-01-30得票数 26
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
