vue.js - 更改特定索引而不在 Vuejs 中重新渲染整个数组
问题描述
在Vuejs项目中,我的数据对象中有一个数组,并使用指令将其呈现在视图中。现在,如果我更改该数组中的特定索引,Vue 会在视图中重新渲染整个数组。有没有办法在不重新渲染整个数组的情况下查看视图的变化?v-for
这个问题背后的原因是我的数组处理或做某事的其他索引,当整个数组重新呈现在视图中时,这些进程就会停止。
解决方案
在 Vue 1.x 中,我们必须track-by="$index"
跟踪渲染数组中更改的索引。但是从 2.x 版本开始,Vue 建议在我们使用intead:key
渲染数组时使用。但考虑一下这个打击示例:v-for
track-by="$index"
在<template>
:
<div v-for="(doc, i) in docs" :key="i">
<h4>{{ doc.status }}</h4>
<button @click="reject(i)"> Reject </button>
</div>
在<script>
:
data: {
docs: [
{ status: 'pending' },
{ status: 'pending' },
{ status: 'pending' }
]
},
methods: {
reject(index) {
this.docs[index] = { status: 'rejected' }
}
}
在这个例子中,当我们改变一个索引时,虽然数组改变了,但是我们在视图中看不到任何改变。那是因为我们的组件之前渲染过,我们需要更新它的视图。为此,我们需要this.$forceUpdate()
在我们的方法中使用来更新组件。
reject(index) {
this.docs[index] = { status: 'rejected' }
this.$forceUpdate();
}
推荐阅读
- c# - NLog - 将日志条目写入不同的文件
- delphi - 在使用 MSBuild 从命令行编译时,他们有什么方法可以选择连接配置文件管理器吗?
- laravel - 使用内部连接从不同的表中获取数据
- php - 如何将实体与 DBAL sqlsrv 一起用于 easybundle 管理员
- python - 如何根据年份在 Pandas 数据框中创建多个列
- jenkins - Jenkins中“与{node}相关的项目”是什么意思?
- c# - DateTime.Parse 在 Windows Server 2012 上不起作用
- python - 带路径的 Python OPC-UA 访问节点
- python - 摆脱 Pandas 列中字符串中的特定字符
- c - 用于 simd 的 pragma omp 不会在 GCC 中生成向量指令