描述：在vue的data属性中，定义了一个数组，然后这个数组需要在html中渲染，你需要在watch属性中修改了某个值，在html中显示。

问题：为什么渲染不了？

答：跟vue的响应式原理有关（我瞎说的）

解决方案：

方法一：（推荐）

用this.$forceUpdate()强制刷新，官方文档定义：迫使组件实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件

export default {data(){return {arr:['张三','李四','王五','赵六']}}watch: {arr:{immediate:truedeep:truehandler(v) {this.arr[0] = '熊二'this.$forceUpdate()//如果修改data中数组（根据下标）的某个值，要强制刷新}}}
}

方法二：（推荐）

用$set()方法，一参是数组，二参是下标，三参是值

export default {data(){return {arr:['张三','李四','王五','赵六']}}watch: {arr:{immediate:truedeep:truehandler(v) {this.$set(this.arr, 0, '熊二')}}}
}

方法三：（不推荐）

直接换掉整个数组

2021/11/11更新

重点

this.$forceUpdate()与this.$set()的区别？

this.$forceUpdate()强制性刷新dom（全局）性能消耗高，触发updated生命周期

this.$set()对数组和对象赋值，并监听，指定性刷新，性能消耗低

踩坑：套入多个循环后，用this.$forceUpdate()刷新不了，用this.$set()就可以刷新，咱啥也不懂，啥也不敢问

PS：vue中的watch属性具体怎么用，传送门

vue的watch:{}属性用法handler(v){},immediate,deep_是泡沫呀的博客-CSDN博客

在vue中修改数组某个元素，值变了，渲染不了相关推荐

vue快速修改数组的某个值_详解vue组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛 ...
vue中删除数组元素
vue中删除数组元素 let arr = [{ name: 'aa',id: 11},{name: 'bb',id: 12} ] 1.filter arr = arr.filter(t => t ...
js入门·表单详解一（修改表单属性，修改表单元素值）
实在javascript入门·Document对象入门讲解(访问表单,创建新页,获取页标题) 一文中,我们已经把表单的一些基本访问等弄清楚了,下面我们深入的学下表单的属性以及对表单元素的简单操作! 演 ...
c编程：求出4#215;4矩阵中最大和最小元素值及其所在行下标和列下标，求出两条主对角线元素之和。...
//求出4×4矩阵中最大和最小元素值及其所在行下标和列下标,求出两条主对角线元素之和 #include <stdio.h> int main() {int sum=0;int max,mi ...
vue中动态获取dom元素进行操作
这几天我远程面试了一家公司,期间问题我都回答上来了但有一个问题我很纳闷就是你说下vue中获取dom元素的方法吧我说大体上俩中吧 1.vue中 ref的方法给元素起一个ref名称通过 th ...
在vue中修改浏览器图标和名字
在vue中修改浏览器图标和名字 vue中,网页图标默认使用的是vue自带的一个icon的图标,也是vue的logo. 下面整理了几种改变标题和图标的方法 1.修改图标样式 01.使用图片这个方法是可 ...
Vue中foreach数组与js中遍历数组的写法
场景 Vue中使用Axios发送get或者post请求,发送请求时需要在js中对请求参数进行遍历并处理. 接收响应时需要对响应结果进行遍历和处理. 注意区分在vue和js中foreach数组的区别. ...
PHP运算符 - 对象的方法或者属性， =数组的元素值
->用于取对象的方法或者属性, =>用于取数组的元素值. 转载于:https://www.cnblogs.com/npk19195global/p/4490756.html
vue中使用v-if出现的值回显不了的问题
vue中使用v-if出现的值回显不了的问题这样会有其中某一个值回显不了的问题, 去掉v-if可以正常回显加上之后会莫名不回显解决方法:外边包个div就可以了如果还解决不了 div别再太外围 ...
vue 中遍历数组对象存到一个新数组里
vue 中遍历数组对象存到一个新数组里(亲测可行!!!) 参考文档 : MDN-解构赋值方法一 : For of 迭代和解构 var people = [{name: 'Mike Smith',f ...

在vue中修改数组某个元素，值变了，渲染不了

重点

在vue中修改数组某个元素，值变了，渲染不了相关推荐

最新文章

热门文章