vue中更改数组中属性在页面中不生效怎么办

这篇文章将为大家详细讲解有关vue中更改数组中属性在页面中不生效怎么办,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联建站是一家专注于成都网站建设、成都做网站与策划设计,内江网站建设哪家好?创新互联建站做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:内江等地区。内江做网站价格咨询:18982081108

问题描述:

使用vue的方法获取了数组数据,获取数据后为每个数据增加edit属性,初始值均为false,其目的是为了当点击列表中的编辑按钮时,控制保存与不保存的按钮的出现与消失,结果当更改数组中的edit属性后,页面并没有如预期的那样当edit为true时页面显示更改状态,当edit为false时为不更改状态

解决方案:

edit是在通过post方法获取数据后增加到vue的data数据中的属性,一开始我的做法先将接收到的数据赋值到vue的data中,再对vue的data中的数据增加edit属性,这样在改变edit的之后,虽然在js中使用console.log可以看到该值已经发生变化,但页面中的data值并没有发生变化。

正确的做法应该是先为接收到的数据初始化edit属性,再将处理后的数据赋值给vue的data。

代码如下


     
      
       {{book.orderIndex}} //如果edit属性为false,则该span出现
        //如果edit属性为true,则该input出现
      
      
        //如果edit属性为true,出现不保存(x)按钮
        

        //如果edit属性为true,出现保存(√)按钮
        
       
      
      
     
    

关于“vue中更改数组中属性在页面中不生效怎么办”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网站栏目:vue中更改数组中属性在页面中不生效怎么办
链接URL:http://scyanting.com/article/jsjosp.html