Vue -仅对v-for数组中新添加的元素执行操作
Vue是一种流行的JavaScript框架，用于构建用户界面。它采用了响应式的数据绑定和组件化的开发方式，使得开发者可以更高效地构建交互式的Web应用程序。
针对你提到的问题，当在Vue的v-for指令中向数组中添加新元素时，Vue会自动检测到数组的变化，并对新添加的元素执行相应的操作。具体来说，Vue会根据新元素的值和位置，动态地更新DOM，以确保界面与数据的同步。
在这种情况下，Vue会执行以下操作：
- 如果v-for指令绑定的数组是响应式的（通过Vue的data属性定义），Vue会检测到数组的变化。
- Vue会识别到新元素的添加，并根据新元素的值和位置，动态地更新DOM。
- Vue会执行必要的DOM操作，例如插入新元素或更新已有元素的内容。
- 如果有其他与新元素相关的Vue指令或事件绑定，Vue也会相应地处理它们。
这种自动更新DOM的特性使得开发者可以专注于数据的处理，而不必手动操作DOM。同时，Vue的虚拟DOM技术也能够提高性能，减少不必要的DOM操作。
对于Vue的v-for指令，它主要用于循环渲染数组或对象的内容。在应用场景上，v-for可以用于展示列表、生成动态表格、渲染多个相似的组件等。
腾讯云提供了一系列与Vue相关的产品和服务，例如云服务器、云数据库、云存储等，可以帮助开发者构建和部署Vue应用。你可以访问腾讯云官网（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
我需要查看的vue资源HTTP请求。如果发现了新数据，我希望将推送到v-for循环，如果发现的数据被删除，则希望删除，而无需重新呈现整个v-for数据。
JS
new Vue({
el: '#chats',
http: {
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
},
data: {
chats: []
浏览 2提问于2016-09-11得票数 1
1回答
我正在尝试向下滚动到vue中新出现的元素：
我有两个数组的聊天消息：
data() {
return {
activeChats: [],
openedChats: [],
maxOpened: math.round(window.innerWidth / 300),
}
}
当我收到新消息并且对话不在活动和打开的阵列中时，我会添加到这两个阵列中，它会出现在屏幕上，因为我在两个阵列上都使用了v-for。
这一切都正常，但我不确定如何向下滚动div当新的聊天出现时，我尝试使用裁判，但没有运气：
<div class="chat" v-for
浏览 0提问于2018-10-23得票数 1
在上，它说：
在计算属性不可行的情况下(例如在嵌套的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
1回答
我已经在vue中创建了图片库组件，它有以下代码的lightbox
<div id="lightbox" class="modal" v-if="photo !== null" v-show="showModal" @click.self="closeModal">
<div class="modal-content">
<div class="slide">
<div class="sl
浏览 1提问于2021-08-17得票数 0
回答已采纳
我在想对我的处境有什么好办法。考虑以下代码：
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }} + {{todo.added_text}} <button v-on:click="add_text(todo)">do</button>
</li>
</ol>
</div>
<script type="text/javasc
浏览 2提问于2018-05-16得票数 1
回答已采纳
我使用vue draggable组件将对象从一个div拖放到另一个div。我还使用了过滤v-model的filterBy。问题是，当我过滤(例如，得到1个结果)并尝试拖放项目时，所有项目中的第一个项目会被拖放，而不是被拖放的项目。
拖动自：
<draggable :list="available" class="draggable" :options=" group:'stuff'}">
<div v-for="people in filterBy(available, filter_availab
浏览 31提问于2017-03-17得票数 2
有没有办法在每两个v-for生成的标签之间插入新的标签？比如Array.join()。
背景：
我想在每两个<router-link></router-link>之间插入一个<span>,</span>。
<router-link></router-link>是由v-for生成的，代码如下：
<router-link tag="a"
v-for="text in ['vue', 'react', 'JQuery']&#
浏览 3提问于2018-12-30得票数 2
2回答
我创建了一个组件"my-item“，它包含三个元素:一个下拉列表(由”itemList“填充)和两个从下拉列表填充的输入框。此组件被视为一行。
我试图一次添加和删除一行，但有两件事我不确定。(1)向行数组添加什么？(2)为什么this.rows.splice(index,1)只删除最后一行？
谢谢
<div id="app">
<my-item v-for="(row, index) in rows"
:itemdata="itemList"
v-on:remove=
浏览 3提问于2016-12-29得票数 23
回答已采纳
我有：
Vue应用程序数据：
data: function() {
return {
items: [
{id: 1, text: 'one', other_data: {}},
{id: 2, text: 'two', other_data: {}},
{id: 3, text: 'three', other_data: {}}
]
}
}
模板：
<div v-for="item in items" i
浏览 0提问于2019-10-21得票数 0
它实际上是一个三合一的问题： vue/no-multiple- template -root模板根目录不允许'v-for‘目录。plugin plugin-vue vue/no- Parsing -分析错误:应为别名，但实际为空。plugin plugin-vue vue/valid-v-对于预期的'v-bind:key‘指令，使用由'v-for’指令定义的变量。plugin plugin-vue 有人能帮帮我吗?我受够了在网上到处搜索它 enter code <template>
<div class="post" v-f
浏览 127提问于2021-08-21得票数 1
1回答
我试图从数组中获得一个值(用于特定的组件)。问题是，我希望获得单个值，但不是数组中的每个值(例如，关于沃德卡的所有内容)。因为我的组件没有正确地处理动态路由，并且页面是空的，所以它显然是数组的问题。
但是，下面是我得到的警告消息:在执行调度程序刷新时，未处理的错误。这可能是Vue内部程序的错误。请在 at <SingleDrink SingleDrink= (6) open}，{…}，{…}，{…}，{…}，{…}
这就是我的数组的样子(来自Drinks.vue)：
data(){
return{
drinks: [
{produ
浏览 6提问于2022-07-19得票数 0
2回答
我的vue数据由人员列表组成。
self.vue = new Vue({
el: "#vue-div",
delimiters: ['${', '}'],
unsafeDelimiters: ['!{', '}'],
data: {
users: [
{first_name: "John",
last_name: "Doe",
email: "jdoe@
浏览 0提问于2016-11-12得票数 0
2回答
我有一个对象是数组的列表..。
..this是在vue js中从道具中声明的数据：
data: function(){
return{
listaSelezionati:this.selezionati
}
}
..wich在v-for上呈现。
<div class="row" style="margin-bottom:20px;" v-for="(selezionato,index) in listaSelezionati">
..inside这个for循环有一个按钮调用一个函数
&
浏览 4提问于2017-07-17得票数 0
回答已采纳
1回答
我使用VueJS并具有嵌套元素，这些元素是动态创建的，如下所示：
<container>
<outerElement class="outer" v-for="obj in objects">
<innerElement class="inner" v-for="element in obj"/>
</outerElement>
</container>
现在，当提到CSS时，我遇到了一个小问题。由于innerElements是可移动的，所以它们需要外部元
浏览 0提问于2019-09-10得票数 1
回答已采纳
2回答
我试图将相应的化身添加到每个通知中，这样我就可以与其他通知一起显示它，但我无法自己解决这个问题。下面是Vue.js模板中的HTML：
<li class="notification" v-for="(notification, index) in notifications">
<a>
<span class="image">
<img :src="notification.avatar" alt="A
浏览 0提问于2019-03-15得票数 0
回答已采纳
我使用Vue JS进行视图模型绑定。在我的data对象中，我有一个按升序排序的项数组(从最老的到最新的)，出于基于代码的原因，我希望保持这种方式。
var v = new Vue({
el: '#app',
data: {
items: [
{id: 51, message: 'first'},
{id: 265, message: 'second'},
{id: 32, message: 'third'}
浏览 22提问于2016-06-05得票数 60
回答已采纳
2回答
我有一个使用v-for填充的数组。还有一个按钮，当单击时，使用splice()从数组中删除一些项。但是，由于某种原因，它只是删除数组的所有项。
下面是代码：
new Vue({
el: '#app',
data: {
numbers: {
list: [1, 2, 3],
index: 0
}
},
computed: {
getNumbers() {
let nums = this.numbers.list
return nums.splice(this.numbers.index,
浏览 0提问于2018-08-14得票数 0
回答已采纳
1回答
//store
export default {
state: {
aboutModels: []
},
actions: {
findBy: ({commit}, about)=> {
//do getModels
var aboutModels = [{name: 'About'}] //Vue.resource('/abouts').get(about)
commit('setModels', aboutModels)
}
},
getters: {
浏览 9提问于2016-09-18得票数 9
回答已采纳
我正在VueJS中创建一个组件递归树。在我的item组件中有这样的行：
<item v-for="i in items" v-model="i"></item>
它很好，但是Vue给了我这个警告：
您正在将v模型直接绑定到v-for迭代别名。这将无法修改v源数组，因为写入别名就像修改函数局部变量一样。考虑使用对象数组，而不是在对象属性上使用v模型。
我对这个警告感到困惑，因为我的应用程序似乎运行良好--我可以添加、移动和删除项目树中的节点。这条错误信息是怎么回事-我该担心吗？
浏览 3提问于2017-03-16得票数 1
1回答
如何在vue.js中显示嵌套对象
、、、、
我返回的数据是一个带有嵌套对象的对象数组。我无法在模板中的v-for循环中显示“events”，因为我似乎无法访问返回数据的那一部分。
数据返回如下(从Vue DevTools)：
list: Object
user: "name"
id: "id"
events: Array[3]
0: Object
title: "event 1"
1: Object
title: "event 2"
2: Object
浏览 1提问于2016-01-31得票数 1
回答已采纳
为什么v-for对数组中的某些元素没有反应？
this.test[3] = 3
如果稍后我将调用push for数组，则只调用Vue rerender内容。
this.test[3] = 3;
this.push(4);
示例：
var vm = new Vue({
el: "#app",
data: {
test: [1, 2],
},
methods: {
changeVar1: function() {
this.test[3] = 3;
this.test.push(4);
},
change
浏览 0提问于2018-04-17得票数 3
回答已采纳
v-for指令无法读取nStars支柱以执行循环.听着，我正在尝试使用组件<display-stars>来显示多个星星。但是，由于某种原因，组件没有接收要执行循环的nStars支柱。这是我的密码：
<h1><display-stars :nStars="3"></display-stars></h1>
逻辑
const app = Vue.createApp({}); // It contains more logic, but it's not relevant.
app.component(
浏览 2提问于2021-09-16得票数 1
回答已采纳
我在我的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
回答已采纳
我在utils中有一个列表，我几乎在任何地方都使用它，并且它在每个对象中只有text变量。 在我一个组件中，我需要将done变量添加到列表中的每个项目中，以便可以切换它们。我可以看到变量已添加，但无论何时切换它，视图都不会更新。 const arrayFromUtils = [{
text: "Learn JavaScript"
},
{
text: "Learn Vue"
},
{
text: "Play around in JSFiddle"
},
{
text: "Bui
浏览 91提问于2020-10-05得票数 0
回答已采纳
我正在尝试对将来添加到列表中的当前项和项使用一个带有v4的随机字符串(UUID )(这是一个待办事项列表类型的应用程序)，但我不确定语法是什么。
我安装了它，并将它添加到main.js中的项目中：
import UUID from 'vue-uuid';
Vue.use(UUID);
但是，我不知道如何在我的Vue组件中使用它。这就是我试过的：
模板：
<transition-group
name="list"
enter-active-class="animated bounceInUp"
leave-active-clas
浏览 0提问于2020-01-18得票数 6
回答已采纳
3回答
我有一个number字段，我想从这样的数组绑定值：
<div v-for="p in products">
<input type="number" :value="carModel[p.name]" />
</div>
如果p.name是一个字符串(产品名称)，则car_a：
const app = Vue.createApp({
data() {
return {
products: {...},
浏览 3提问于2022-02-23得票数 2
Vue: v2.*
在我的项目vuejs中，我使用v-for范围和计算值。
计算
computed: {
numberOfPages() {
const result = Math.ceil(this.collection.total / this.collection.per_page)
return (result < 1) ? 1 : result
}
},
模板
<li class="waves-effect" v-for="(number,index) in numberOfPages"
浏览 8提问于2018-07-20得票数 9
回答已采纳
我的妻子：
new Vue({
data: {
...
},
computed: {
peaksAndEstimations: {
get: function () { ... }
set: function () { ... }
我无法接收迭代计算的变量的新值：
<tr v-for="(peak, index) in peaksAndEstimations">
<td>
<input v-model="peak.
浏览 0提问于2018-12-07得票数 0
回答已采纳
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
回答已采纳
我在Vue.js中有一个代码
<li v-for = "record in records" v-bind:key= "record.id">
<div class="collapsible-header"><i class="material-icons">date_range</i><h6>{{record.record_date}}</h6>     <span class=
浏览 0提问于2018-01-12得票数 3
我的意思是：
假设我们在自定义vue组件中有一个v-for指令，其使用方式如下：
<my-custom-component v-for="item in items" :key="item.id">{{item.remark}}</ my-custom-component>
在这里使用:key="item.id"的目的是什么？
浏览 6提问于2017-12-26得票数 16
回答已采纳
我有下面的pug/html：
table.accountinfo.table.table-sm
thead.thead
tr
th #
th Name
th Address
th Balance
tbody
tr(v-for="account in accounts")
浏览 1提问于2017-12-23得票数 0
我遇到的过渡问题，当动画点击‘流’按钮是不同的动画后，点击‘流随机’按钮，从摇铃。
也许我的造型是错的，但不知道为什么仍然得到流的行为。
我需要行为像‘流随机’的数组的div's。
谢谢
new Vue({
el: '#list-complete-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
add: function (item) {
this.items.splice(this.items.length, 0, item
浏览 5提问于2017-12-11得票数 1
回答已采纳
1回答
我有一个v-for列表，它呈现数组的初始状态。但是，当我将项添加到数组时，呈现将不会被更新。文档中的大多数答案--因此这里提到--您必须使用this.$set而不是array.push()，但在我的例子中，这是没有帮助的。
当调用addTag("thing")时，"thing“被添加到数组中，并且它在Vue检查器中是可见的。只是没有更新的v-for而已。
模板
<span v-for="(tag, index) in project.tags" :key="index">
{{tag}} // this re
浏览 1提问于2018-02-12得票数 3
回答已采纳
3回答
尽可能简单地说：
我有一个v-for循环。我想要访问循环的一个迭代中的特定元素。由于某些原因，我只能使用ref来做这件事。有没有办法做到这一点？
我尝试了各种不同的方法来实现这一点，但它总是返回未定义的结果。我的代码在v-for循环之外运行得很好。
vue的文档没有介绍这个实例。
循环简化了：
<div v-for="(item, i) in items">
<div ref="card"></div>
</div>
该方法
doThing() {
card = elements.creat
浏览 1提问于2019-01-08得票数 2
我有一个表单，其中两个输入的类型为'select，其中一个依赖于另一个，第一个输入称为Area，它动态地从服务器获取选项，另一个称为City，它基于Area输入获得选项。
这是HTML中的代码：
<select v-model="areaSelected">
<option v-for="area in areas" :key="area.id" :value="area.id">
{{are
浏览 0提问于2020-12-10得票数 0
5回答
我对Vuejs很陌生。做了些什么，但我不知道这是简单/正确的方法。
我想要什么
我需要数组中的一些日期，并在事件中更新它们。首先，我尝试了Vue.set，但它没有成功。现在，在更改数组项之后：
this.items[index] = val;
this.items.push();
我什么也不推到数组上，它就会更新..但有时最后的东西会被藏起来，不知怎么的.我觉得这个解决方案有点麻烦，我怎么能让它稳定下来呢？
简单的代码如下：
new Vue({
el: '#app',
data: {
f: 'DD-MM-YYYY',
items: [
浏览 1提问于2017-03-15得票数 111
回答已采纳
我目前正在循环访问一些参与者，并使用Vue.js v-for显示每个参与者的统计数据。但是，我还想显示该参与者的summonerName以及他的统计数据。
问题是关于用户的信息包含在participantIdentities中，而他的统计数据包含在participants中。我假设我可以使用在两种情况下都存在的participantId属性以某种方式连接这两个属性，但是，我不确定如何做到这一点。
<div class='participant' v-for='participant in match.details.participants'>
浏览 25提问于2019-07-09得票数 0
我正在使用Vue.js 3。我遇到了一个问题，让我们先看看代码。
码
ChildComponent.vue
<template>
<div>
{{ modelValue }}
<input v-model="resultString"/>
<button @click="showModelValue">show model value</button>
</div>
</template>
<script lang="ts">
impor
浏览 8提问于2022-04-27得票数 0
回答已采纳
我想在我想要的时候把数据添加到表中。但是，我不能在初始化vue实例后添加数据。
我已经尝试使用下面的内容，但是，仍然没有更新数据。
·$nextTick·$set
<script>
var overall = new Vue({
el: '#overall',
浏览 0提问于2019-06-05得票数 1
1回答
我有这样的模板
<template>
<div>
<div id="hiddenElement">
<MyElement v-for='...' @click="...">
</MyElement>
</div>
<div id="appendElementsHere" />
</div<
</template>
用户可以将元素附加到列表中，所以我有一些类似如下的函数：
someFunc(){
浏览 4提问于2019-10-24得票数 3
回答已采纳
1回答
我使用Vue Devtools.For示例，当我在控制台wm.numbers[0]=6上以这种方式更改数字时，我刷新Vue Devtools并查看，数字已经改变，但是evenNumbers没有changed.What是问题所在吗？
Javascript代码：
var vm = new Vue({
el:'#app',
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(functi
浏览 1提问于2018-08-16得票数 1
回答已采纳
如果我的v-model是空的，我如何在v-for中选中单选按钮？
用户列表可能不同，所以我不能设置selectedUserId: 665。我尝试使用索引“：checked=== 0”，但它不适用于v模型。
var radioVue = new Vue({
el: "#test",
data: {
selectedUserId: null,
users: [{id: 665, name: 'John'}, {id: 1135, name: 'Edward'}, {id: 7546, name: 'David&
浏览 19提问于2019-07-18得票数 0
回答已采纳
3回答
我有一个VueJS应用程序。我有两个清单: A，B
A包含所有元素B包含来自A的一些元素
我有<select>标签。每个select标记必须保存B元素的值，并且应该可以选择B中不包含的其他A值。
问:除了标记在B中选择的元素之外，我如何正确地过滤B中不存在的A元素？一个通用的解决方案是对每个元素进行迭代，并从列表中取消不想要的元素。问题是Vue具有反应性属性，这意味着当我更改自定义select的列表时，更改也会传播到其他select。
我已经绕了一个多小时了。我相信我正在为一个简单的问题建立方案，这个问题有一个简单的解决方案，但我找不到。请帮帮我。
const app = ne
浏览 7提问于2020-06-10得票数 0
回答已采纳
2回答
我想要在调用特定方法时更改任务的状态。但问题是，我无法获得数组中特定项的索引来更改其状态。这是我的HTML：
<div class="main" id="my-vue-app">
<ul>
<li v-for="task in completeTask">
{{ task.description }} <button @click="markIncomplete">Mark as Incomplete</button>
浏览 1提问于2018-04-07得票数 7
回答已采纳
1回答
分页vue 3
、、
我有一个本地数组，其中包含传递给表的数据。我创建了变量:页面、限制、totalPage和函数changePage。在钩子onMounted中，我根据给定的限制计算页面数。通过v-for循环，显示页面并使它们在函数上可点击，但我不知道如何设置显示的表元素的限制，以及如何使分页工作。
<template>
<div class="containerApp">
<Dialog
:showForm="showForm"
@changeToggle="changeToggle"
浏览 4提问于2022-09-24得票数 0
回答已采纳
1回答
我使用的是基于SortableJS库的Vue.Draggable库。 在我的代码中，我有两个可拖动的列表，但我还有第三个列表，它没有与简单的元素结合在一起。 第三个列表有一个对象数组，每个对象数组中都有一个端点条目，当我删除元素时，我想执行一个函数，该函数从端点获取对象数组，并将其与目标列表合并。 var vm = new Vue({
el: "#main",
data: {
list: [{
name: "John"
}, {
name: "Joao"
}, {
name
浏览 14提问于2019-02-12得票数 0
回答已采纳
2回答
我有一组在v-for循环中呈现并与v-模型绑定的选择(分配给项的item.pricelists)。该项的可能选择选项将使用来自item.valid_pricelists的另一个v-for呈现。两者都是从同一数组中的服务器中提取的。现在，我需要观察用户何时更改选择，以便使用来自item.pricelists的新值更新item.valid_pricelists数组。
渲染部分：
<div v-for="(row,index) in item.pricelists">
<select v-model="row.id">
浏览 5提问于2016-12-17得票数 6
回答已采纳
2回答
我的结构和下面的样例相似
new Vue({
el: '#app',
data: {
tasks: ['task1', 'task2', 'task3'],
actions: {
'task1': {
name: 'dig',
time: '20min'
},
'task2': {
name: 'run',
time:
浏览 4提问于2017-04-21得票数 1
回答已采纳
我是新来的。因此，我的数据中有这个数组，当我在控制台中输出数据时，结果是正确的。我需要将这些类别放在数组中，因为它可以有多个类别。
const app = new Vue({
el:"#app",
data:{
market:{
categories:[]
}
},
methods: {
init: function(){
var app = this;
var url = '/api/categories/0';
axios.g
浏览 1提问于2018-06-25得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
