vue中数组发生变化但视图没有更新,vue中对象属性改变视图不更新问题

　　本文主要介绍了vue中v-for数据的状态值发生了变化，但视图没有发生变化的解决方案。有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

v-for数据状态值变了，但是视图没改变

问题现象

　　1.在v-for中，列表中的每个项目都有一个按钮。你点击按钮通过一个属性show，show，type为boolean动态选择按钮的类名。

　　2.v-show通过每个项目的显示是真还是假来显示。

　　最后我发现你点开之后，输出发现真假都变了，但是感觉好像是我在努力不重新渲染。通过查找发现v-for不会进行第二次华丽的增删数组操作，但这不是增删，只是改变了值的状态，也就是修改。以前这样写好像没问题。

问题出现原因

　　1.您确定该属性是由下标动态添加的吗？其实本质还是满足加数组的运算。代码可能是这样的。

　　data(){

　　productDetailList: []，

　　列表：[{

　　id: 1，

　　秀：真的，

　　名称：“1111”

　　{

　　id: 2，

　　秀：真的，

　　名称：“222”

　　}

　　var info=JSON . parse(JSON . stringify(RES . data . info))

　　this . product detaillist=info . product detaillist

　　for(var I=0；I this . product detail list . length；i ) {

　　this.productDetailList[i]。show=true

　　}

　　上面vue中的list列表，我可以直接写show属性。最后，写过去也没问题，可以实现数据双向绑定的尝试。

　　所以区别很明显，就是在这个show属性里，我这次是通过角标动态添加的。而vue，对于这种不能听的。

　　Vue当然有解决方案。

问题解决

　　使用Vue的set方法，使用前要介绍一下。

　　脚本

　　从“vue”导入Vue

　　1.页，面，张，版

　　productDetailList中的view class= item-wrap v-for=(product，index):key= index

　　button:class= product . show==true？

　　icon font icon-Wei Biao ti 1 item-btn : icon font icon-夏香item-BTN

　　@click=显示(产品，索引)/按钮

　　查看v-show=product.show==true？“真：假”

　　视图class=item-grid style=

　　按钮type= default class= fold-BTN @ click= hide all Collapse all/button

　　2.方法

　　方法：{

　　hideAll(){

　　var arr=this.productDetailList

　　for(var I=0；iarr .长度；i ){

　　arr[i]。show=false

　　Vue.set(this.productDetailList，I，arr[i])

　　}

　　显示(产品、索引){

　　product.show=！产品展示

　　Vue.set(this.productDetailList，index，product)

v-for循环改变循环数据视图不更新

　　前端开发中，下图所示的菜单框架(左侧菜单内容被顶部菜单点击，然后数据中的菜单动态更新：[]) V-for循环菜单显示左侧菜单。

　　问题：点击顶部菜单后(菜单[]被重新分配)，左侧菜单无法更新到新菜单[]中的内容。

　　原因：

　　由于JavaScript的限制，Vue无法检测到以下变量数组：当你直接通过index设置一个项时，例如：VM . items[indexOfItem]=new value；修改数组长度时，例如：vm.items.length=newLength。

解决1

　　为了避免第一种情况，下面两种方式会达到类似vm.items[indexOfItem]=newValue的效果，也会触发状态更新：

　　//Vue.set

　　Vue.set(示例1.items，indexOfItem，newValue)

　　//Array.prototype.splice

　　example 1 . items . splice(indexOfItem，1，newValue)

　　为避免第二种情况，请使用拼接：

　　示例1.items.splice(新长度)

解决2

　　V-为循环中的K值选择数组对象的名称或其他非唯一值，如下图所示

　　当原因：key代表的属性发生变化时，强制更新组件，将解决vue无法检测到数据变化，v-for view内容不更新的问题。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。