Vue.js: v-for循环中的值未保留在正确的数组项中
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它通过将视图层与数据层进行双向绑定来简化开发，提高开发效率。Vue.js 支持使用 v-for 指令在模板中进行循环渲染。
对于问题中提到的 "v-for循环中的值未保留在正确的数组项中"，这通常是由于 Vue.js 中对数组的响应式处理机制所导致的。在 Vue.js 中，当你通过改变数组的索引或修改数组的长度时，并不会触发视图的更新，因为 Vue.js 并不能监听到这些变化。
解决这个问题的常见方法是使用 Vue.js 提供的变异方法来修改数组，以确保视图能够正确地更新。常见的变异方法有：
- push：在数组末尾添加一个或多个元素。
- pop：移除数组末尾的一个元素。
- shift：移除数组开头的一个元素。
- unshift：在数组开头添加一个或多个元素。
- splice：从指定索引开始移除或添加元素。
- sort：对数组进行排序。
- reverse：颠倒数组中元素的顺序。
如果你直接修改数组的索引或长度，Vue.js 将无法检测到这样的变化，导致视图无法正确更新。因此，推荐使用上述的变异方法来操作数组，以保持数据的响应式。
在使用 v-for 进行循环渲染时，还可以使用特殊的属性 key 来提高渲染性能和避免错误。key 的作用是给每个节点赋予一个唯一的标识，Vue.js 可以根据 key 来判断节点的复用与否。当数据发生变化时，Vue.js 会尽量去复用已有的节点，而不是重新创建。因此，为每个循环项提供一个唯一的 key 值可以帮助 Vue.js 更高效地进行渲染。
以下是对于 v-for 循环中的值未保留在正确的数组项中的解决方案：
- 确保使用了合适的变异方法对数组进行修改，而不是直接修改数组的索引或长度。
- 为循环项提供一个唯一的 key 值，以优化渲染性能。
关于 Vue.js 的更多详细信息，以及相关的推荐产品和产品介绍链接地址，请参考腾讯云的官方文档：
- Vue.js 官方文档：https://cn.vuejs.org/index.html
- 腾讯云云开发（CloudBase）：https://cloud.tencent.com/product/tcb CloudBase 是腾讯云提供的云原生全栈服务，集成了云开发、云函数、云数据库、云存储等能力，适用于各种应用场景，包括 Web 应用、小程序、移动 App 等。它提供了稳定可靠的基础设施和丰富的开发工具，帮助开发者更高效地构建和部署应用。
相关·内容
我使用嵌套的For循环来访问json中的数据，然后返回一个变量，以便在前端使用Vue进行访问。我不知道为什么，但我只返回嵌套数组的第一个元素的值？希望有人能帮上忙。这似乎没有任何意义。
*总是只有一个作业，这就是为什么我只在作业中循环。
我已经尝试了forEach，For，For，我已经尝试了map (不确定如何正确实现)。
所以，这是可行的，我可以使用Vue返回密钥。请注意，这只是一个示例，json正在被正确访问，需要将"Data“传递给函数。
function getData(Data) {
var jobs = Jobs;
var i;
for (i =
浏览 57提问于2019-07-22得票数 1
回答已采纳
1回答
我第一次尝试vue.js，也是一个初学者javascript程序员。我要通过vue.js
我的html代码是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<script src="bower_components/vue/dist/vue.js"></script>
<script
浏览 3提问于2016-01-22得票数 0
回答已采纳
在Python中，有一种简单的方法可以用分隔符链接元素，该分隔符只在“内部”元素之间添加：
>>> print(" → ".join(['hello', 'world', 'bonjour']))
hello → world → bonjour
我想知道在Vue.js中是否有一种简单的方法来做同样的事情。我正在考虑为此使用<v-for>，但我认为我无法影响构建迭代的方式：
new Vue({
el: "#app",
data: {
boxes: [1, 2, 3]
浏览 3提问于2019-11-16得票数 0
回答已采纳
错误：“v-model”指令不能更新迭代变量'msg‘本身vue/valid模型
<div v-for="(msg,name) in normal" :key="name">
<input type="text" v-model="msg">
</div>
<script>
export default{
data(){
normal: {
position: "bottom",
message: "",
浏览 13提问于2020-04-06得票数 2
回答已采纳
在上，它说：
在计算属性不可行的情况下(例如在嵌套的v-for循环中)，可以使用方法。
但是，我能够在嵌套的v-for循环(检查小提琴)中使用计算道具。
new Vue({
el: '#sample',
data() {
return {
numbers: [1, 2, 3, 4, 5]
}
},
computed: {
even() {
return this.numbers.filter(n => n % 2 === 0)
}
}
})
<script src="http
浏览 1提问于2018-02-14得票数 3
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app-gridview">
<div>
<button class="button" v-on:click="switchView()"><span>{{ buttonSwitchViewText }}</span></button>
浏览 2提问于2021-05-06得票数 0
回答已采纳
我是Vue.js的新手，现在还在学习。我遇到了这个错误，我不知道如何解决。 下面是我的简单脚本： <template>
<div v-for="item in array" :key="item.id">
{{item}}
</div>
</template>
<script>
export default {
data () {
return {
array: ['Lion','Bear','Fish',
浏览 20提问于2021-03-21得票数 0
回答已采纳
我正在使用vue.js库，并试图对位于此处的网格组件示例进行更改：
当我向其中一个列名添加一个空格时，排序会中断。见此处：
列名通过sortBy函数传递，该函数将sortKey变量更新为列名，并将适当的sortOrders键切换为-1或1。
sortBy: function (key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
}
有人知道为什么这不管用吗？当我检查sortKey和sortOrderskey的值时，它们似乎在正确地更新。我认为这肯定与不能使用内置的V
浏览 11提问于2015-11-22得票数 4
回答已采纳
我使用显示一些绑定变量。我页面的骨架是
<body>
<!-- the content of the page, including an instance of the variable {{hello}} -->
<script src="vue.js"></script>
<script src="myscript.js"></script>
</body>
打开页面时，页面显示{{hello}}的时间很短，在此之后，将立即替换为变量hello的正确值。
什么是正确的方法(
浏览 1提问于2017-04-03得票数 2
回答已采纳
1回答
我试图在项上设置一个类，其中二维数组的值设置为true。数组如下所示：
test[item][day]
然后在一个方法中创建和设置。
模板：
<div>
<div v-for="item in items" class="item-row">
<div class="item-name">item: {{ item.id }}</div>
<div v-for="day in days" class="item-header" v-bind
浏览 2提问于2016-11-24得票数 0
回答已采纳
1回答
我仍然在学习Vue.js，我有一个小问题:我有一个带有一个复选框数组的文件组件，我已经查看了是否使用了多个复选框，但是这里的示例要求我声明：
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
然而，编辑在data()中的<script>标记中的单个文件组件中设置了这个选项，但它只是一次检查/取消选中所有框(但正确地返回true/false )：
<script>
export default {
name: 'PhrasesDetail'
浏览 2提问于2017-10-23得票数 0
回答已采纳
我正在尝试移动数组中的一个项，在x位置移动到2位置。下面的代码工作并将项移动到新位置。但是，vue不更新DOM。
这是我正在使用的代码：
export default class LayersPanel extends Vue {
@ProvideReactive() public layers: any[] = [
{ name: 'Layer 1' }, { name: 'Layer 2' }, { name: 'Layer 3' }, { name: 'Layer 4' }
]
public onDrag
浏览 1提问于2019-11-20得票数 2
回答已采纳
我想使用Vue.js v-for填充一个html表。但是，它不构建表。我的猜测是，数据输入格式不正确，因此需要映射/更改以删除对象层(每个项的索引)。
我试过使用.map，但它不起作用。
Vue.js
callStocks = function () {
var app = new Vue({
delimiters: ["[[", "]]"],
el: "#stocksTable",
data: {
stocks: []
浏览 7提问于2020-05-20得票数 0
2回答
我的vue js数据有一些数组，在模板中，我试图使用v-for循环来呈现它们。
类似于：
<tr v-for="d in [0,1,2,3]"><td>{{data.people[d].name}}</td></tr>
<tr v-for="d in [0,1,2,3]"><td>{{data.places[d].name}}</td></tr>
<tr v-for="d in [0,1,2,3]"><td>{{data.ord
浏览 1提问于2018-01-29得票数 0
5回答
下面有一个数组，它包含许多列。下面的示例包含三列，但可以动态添加/删除列：
[['position', '30'], ['position', '60'], ['position', '90']]
在用Vue删除正确的列(数组中的索引)时，我遇到了一些问题。
考虑下面的片段：
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
columns: [['position
浏览 1提问于2019-08-28得票数 2
回答已采纳
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
回答已采纳
我在这里发现了同样的问题，但它们不在vue.js中，我不知道如何在vue.js中做到这一点。 我有8个select项目。它们都从数据库中获得相同的option值。 <div class="card-body">
<div>
<label>Polje 1:</label
><select
浏览 32提问于2021-10-29得票数 0
回答已采纳
1回答
我在vue.js中列出了一个列表，其中的顺序不是我所期望的。
编辑:啊哈，看起来问题只出在Chrome上，我不能在Firefox和Edge中复制它
所有项目排序正确(绿色)，期望第一个项目(红色)：
标记中的列表定义如下：
<li v-for="image in orderedPhotos" v-bind:key="image.imageKey" style="border: solid 1px black;margin: 5px">；
orderedPhotos变量是一个计算出来的vue.js变量：
computed: {
浏览 0提问于2018-04-17得票数 0
回答已采纳
我有一个vue.js 2.0应用程序
将我的服务器url注册为全局变量，如在main.js中：
Vue.server = Vue.prototype.server = "http://localhost:3000/";
现在，我正在尝试在v-for循环、vue组件文件users.vue中显示一些图片：
<div v-for="user in users" class="col-sm col-xs-12">
<div class="card " style="margin-bott
浏览 1提问于2019-11-07得票数 1
回答已采纳
我正在尝试构建一个带有选项的自定义checkbox组件，这些选项是由带有选项和值的数组通过v-for循环生成的。我如何正确地将v-model绑定到checkbox组件，以便正确地更新它？
现在的问题是，模型仅更新为选中的最新复选框，并且不会给出具有所有选中选项的数组。
Vue.component('ui-checkbox', {
props: {
label: {
type: String,
required: true,
},
index: {
type: Number
},
input
浏览 10提问于2019-10-01得票数 3
1回答
我有一个用例，我正在努力拼凑，我想要显示不同商店的商品价格，如下图所示。 ? 我的问题是我得到了下面的表格； ? 我的表上的输出不正确。紫金的价格仅在Spar中可用。但在这里，它展示在所有其他商店的下面。对于Raha.Its价格也是如此，我希望其他商店在没有该产品的情况下有一个破折号或空行。 下面是我的vue.js代码： <modal ref="comparisonTable" no-close-on-backdrop no-close-on-esc hide-cancel width="600px" title="GENE
浏览 28提问于2021-07-20得票数 0
回答已采纳
我收到了下面的无限循环警告。我知道这可能是因为我在模板的for循环中由于一个方法调用而改变了一个变量。你知道怎么修复它吗？循环确实完成了，所以它实际上不是一个无限循环，但我想修复这个警告。 [Vue warn]: You may have an infinite update loop in a component render function. 代码片段： new Vue({
el: '#app',
data: {
contents: {"34": {"id": 34, build_name: "email_si
浏览 59提问于2020-03-25得票数 2
回答已采纳
我已经在几个项目中使用了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
回答已采纳
1回答
我想通过v-for在vue.js中生成单选按钮，但是当我选择一台收音机时，其他的收音机也会被选中，所以我希望用户只能选择一台收音机。
<template>
<div>
<div v-for="item in items">
<input type="radio" id="l1" value="item.text" v-model="checked">
<label id="l1" for="item.te
浏览 1提问于2020-12-22得票数 1
回答已采纳
基于num-labels属性，我想使用Vue.js将一个元素重复n次。
<label-parent num-labels="4"></label-parent>
这是我的组件：
<template>
<div id="label-parent">
<div v-for="idx in numLabels">
{{idx}}
</div>
</div>
</template>
<script>;
expo
浏览 4提问于2016-12-02得票数 6
回答已采纳
2回答
您好，我正在处理Vue.js模板，我需要使用循环语句显示动态的v-对话框，但现在它显示了所有内容。 Dom： <template v-for="item of faq">
<div :key="item.category">
<h4>{{ item.heading }}</h4>
<div v-for="subitems of item.content" :key="subitems.qus">
<v-dia
浏览 66提问于2019-09-20得票数 1
1回答
问题陈述:
我在vue.js项目中使用了vue.js功能。每次单击选项卡时，我都希望内容被一遍又一遍地运行。
模板:
<template>
<v-card>
<!-- add tab feture -->
<v-tabs color="#F65C38" left v-model="tab">
<v-tab v-for="item in items" :key="item.tab">
{{ item.tab }}
浏览 3提问于2022-02-20得票数 0
2回答
我有一个嵌套的对象，只想打印对象名。我如何在vue.js中做到这一点？
var object1 = {
'obj1' : {
'obj1a' : 'a',
'obj1b' : 'b'
},
'obj2' : {
'obj2c' : 'c',
'obj2d' : 'd'
}
}
这段代码打印正在迭代的对象的全部内容：
<div v-for="obj in object1"
浏览 23提问于2020-03-10得票数 1
回答已采纳
我很难在循环中使用vue.js中的反应性。循环是没有任何问题的呈现，但是，当试图触发事件时，它更新内容，但在页面中不可见或呈现数据。
我在引导和jquery中使用了vue.js的最新版本。我尝试过在循环项中添加key，但不起作用。但是，当使用v-model更新任何其他内容时，它就能工作了。
标记
<div id="app">
<div class="props">
<div class="prop-item" v-for="prop in modules.variations.propertie
浏览 0提问于2019-08-01得票数 0
回答已采纳
1回答
根据项的类型获取具有条件呈现的项
、、、、
根据数据的特定类型，有分隔数据的列表
任务以完成 :-显示所需类型的唯一项。
<script>
export default {
data(){
return{
items:{
{
type: "a",
text: "TEXT A"
},
{
type: "b",
text: "TEXT B"
},
{
type: &
浏览 1提问于2019-01-09得票数 0
1回答
Vue.js从列表中删除元素
、、、、
我正在尝试创建一个简单的网页，在那里我可以添加或删除文本框使用vue.js。
new Vue({
el: "#app",
data() {
return {
list: []
};
},
methods: {
deleteFromList(index) {
this.list.splice(index, 1);
},
addItem() {
this.list.push({});
}
}
});
<script src="https://cdnjs.cloud
浏览 2提问于2020-12-13得票数 1
我需要使用VUE.js在v-for循环中添加一个链接，条目的数量可以是1-5。然而，href需要是一个从web调用返回的值，以了解url。我有过
<div v-for="objGrant in obj.GrantListData" :key="objGrant.NCI_GrantList" >
<b>Grant Support:<a class="nav-link"
浏览 6提问于2022-09-06得票数 0
回答已采纳
2回答
我有一个这样的场景。假设a= 2,5,6，b= 1,2,3,4,5,6,7,8。数组b显示在方框中，当用户单击任何方框时都会显示出来。我试着做的是，当一个人点击任何框时，值与数组a中的任何值都相同，我会用其他唯一的值替换这个值，如果它们不同，我就会显示出来。例如，如果我单击一个值为2、5或6的框，我会将这些值替换为其他值。 最小的例子是： new Vue({
el: "#app",
data: {
a: [2,5,6],
b: [1,2,3,4,5,6,7,8]
},
methods: {
replaceNumber() {
浏览 27提问于2020-04-02得票数 0
1回答
我想用Vue.js循环一个二维数组，但是当我在另一个v-for中使用嵌套的v-for时，我得到了以下错误：
无效的v-表示别名"case“：v-for="case in line”
new Vue({
el: "#app",
data: {
chessboard: [
[null,null,null,null],
[null,null,null,null],
[null,null,null,null],
[null,null,null,null]
]
}
});
浏览 1提问于2019-01-31得票数 0
回答已采纳
刚开始学习vue.js，在下面的案例中，如何解决v-for div中反复出现的无线电值问题？
<script src="https://unpkg.com/vue@2.5.8/dist/vue.js"></script>
<div id="questOne">
<p>{{question}}</p>
<ul>
<li v-for="item in selections">
<input type=&#
浏览 0提问于2017-11-23得票数 1
回答已采纳
5回答
我需要加载大约1000个静态图像，.gifs和视频在线幻灯片演示文稿。当前，所有项目都同时加载，查看者需要等待才能看到第一个项目。如何在完成加载之前加载每个项目？
Vue.js Vuetify.js代码：
<v-row v-for="(objkts, index) in group" :key="index">
<v-col v-for="objkt in objkts" :key="objkt.id">
<v-card :key="index" width="
浏览 14提问于2021-10-21得票数 3
回答已采纳
1回答
我正在尝试关注下一个动态插入的输入，我可以关注foobar_x，但不能关注v-for循环中的那些。任何帮助都将不胜感激。
Codepen在这里：
new Vue({
el: '#app',
data: {
test: "xxxxxx",
phones: [
{number: "0000000"},
{number: "1111111"},
],
},
methods: {
focusPhones: function() {
this.$
浏览 0提问于2017-09-26得票数 5
回答已采纳
2回答
我正在尝试建立一个简单的聊天应用程序与Vue.js。我的问题是，当写入新消息时，消息区域需要滚动到底部。
我使用v-for指令遍历消息。当v-for更新了DOM时，是否会发生事件？
我这样做是为了让消息区div监听组件的message-array。我试着在将消息附加到数组的同一函数中，将消息区div的scrollTop设置为99999。但问题是，v-for并没有完成DOM的更新，因此它不会滚动到正确的点。
浏览 3提问于2016-01-15得票数 27
回答已采纳
如何始终使用select (在vue.js中)选择第一个项？
<div class="ride-item-content">
<select v-model="ride.location_id">
<option v-for="location in locations" v-bind:value="location.id">
{{ location.from }} - {{ location.to }}
</option>
</select
浏览 3提问于2016-09-23得票数 8
我有两个嵌套循环，我试图在第二个循环中增加一个计数器，这样计数基本上不会重置。
现在:1 2 3 4 1 2 3
需要:1 2 3 4 5 7 8
在中，我会有一个变量，但是它是如何在Vue land中实现的呢？
EDIt
我要模板中的计数，而不是javascript部分。
new Vue({
el: "#app",
data: () => ({
todos: [],
activeIndex: -1
}),
mounted() {
for (let t of ['first', 'second']
浏览 0提问于2019-03-20得票数 0
我想编辑使用Vue.js的用户列表。每个用户都有自己的名字和年龄。看起来v-for是处理列表的正确指令，而v-model是将input内容绑定到列表中特定元素的正确指令。 所以我试着这样实现它： new Vue({
el: '#exercise',
data: {
users: [{
name: "martin",
age: 32
}]
},
methods: {
add_user: function() {
this.users.push({
name: "
浏览 49提问于2019-01-07得票数 3
回答已采纳
我正在创建几个链接，当点击它们时，网页应该显示一些图像或其他图像，为此，我在vue的对象方法中有一些函数，每个函数负责过滤一组图像并显示触摸到的图像。到目前为止，一切都是正确的，问题是当我必须引用这些函数时，因为调用这些函数的元素是用v-for以下面的方式创建的：
<li v-for="categorie in categories">
<a @click="categorie">{{categorie}}</a>
</li>
我的反应变量categories是一个由5个字符串组成的数组，其中只包含名称，那么，当我
浏览 4提问于2019-03-02得票数 1
日安。我使用Vue.js从组件中的数据中呈现任意数量的选择元素。
这里的示例JSON数据表明有两个select元素，每个元素都有一个或多个选项。
{
"dropdowns":[
{
"cd":"UG9ydGZvbGlv",
"formname":"sp_filter_UG9ydGZvbGlv",
"nm":"Portfolio",
"selected":"1a",
浏览 0提问于2019-11-27得票数 1
2回答
我使用Vue.js 2，我有一个数组，这个数组是从这个API调用(这个调用)获得的，我用这个调用在select中创建了一个select：
"genres": [
{
"id": 28,
"name": "Azione"
},
{
"id": 12,
"name": "Avventura"
},
{
浏览 1提问于2021-05-03得票数 0
回答已采纳
我在我的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
回答已采纳
我有一个数组的DIVs，我需要在旋转的基础上显示：
<div v-for="(part, index) in verses" :key="index"
v-show="showSlides[index]">
<pre>{{ part }}</pre>
</div>
下面是相关的vue.js代码：
data: {
verses: ['first line', 'second line'],
showSlide
浏览 0提问于2018-03-26得票数 0
回答已采纳
2回答
我试图使用v-for方法从Vue.js中拆分每个逗号上的字符串。
输入： tags: 'test1, test2, test3'
方法： <span v-for="tag in tags" v-text="tag"/>
输出： t e s t 1 , t e s t 2 , t e s t 3
期望输出： test1 test2 test3
我怎样才能正确地拆分逗号分隔的文本？我不能访问“标记”输入，除非我在一个v-for循环中，以便调用object.tags。
不知道为什么这不起作用，尽管这在我的代码中几乎是一样的：
浏览 0提问于2017-11-29得票数 4
回答已采纳
我用Vue.js制作了一个表，并用v-for指令呈现了其中的一些列：
<td v-for="(item, index) in items"> {{ item.name }} </td>
有一个未知的元素计数，我必须向最后一个呈现的元素添加一个类。我不能使用:last-child或:last-of-type，因为它不是一行中的最后一个<td>元素，它只是用v-for呈现的最后一个元素，但还有下面的<td>元素。
我们如何在Vue.js中实现这一点？
浏览 6提问于2017-10-02得票数 4
回答已采纳
我使用axios从API获取数据，我设法使用v-for迭代每个属性，我想让@click只显示被单击元素的子属性。 //api给出 Subject_title: (...)
showChildren: false <-- This is added during the call with forEach
subject_id: (...)
subjects: (...) 剩下的是： const vm = new Vue({
el: "#app",
data() {
return {
results:
浏览 15提问于2019-01-03得票数 0
3回答
我从vue.js开始，我需要用另一个v-for中的v-for填充select。
我在阅读有关这个题目的问题，但找不到办法使它在我的情况下行得通。
我有一个带有标题和description的嵌套数组(tours)，在另一个数组中有一个v-for来用tours的标题填充select：
html：
<div class="row" id="app">
<div v-for="(item, index) in hosters" v-bind:key="item.id" class="col-md
浏览 2提问于2020-05-18得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
