最近做了一个需求,里面有个功能是弹窗里面有步骤一,然后确定,跳到步骤二,然后点击上一步还可以返回步骤一页面,并且保留步骤一之前的的操作
然后我的思路就是:里面两个子组件,步骤一组件,步骤二组件。然后v-if显示隐藏。
但实际写好之后发现,步骤二返回上一步的时候,因为使用的是v-if,所以数据全部重置了,没有保留之前的操作,所以不符合需求
但幸好步骤一里面的东西不多。
方法一(有瑕疵):
一种解决方法是跳到步骤二的时候,先保留步骤一的所有数据,然后传给步骤二,然后步骤二点击上一步的时候再传给步骤一,这种也可以,但确定是要是步骤一里面有很多数据的话,就很繁琐,而且容易忘记传一些数据。
我想了想,可以使用v-show,因为v-show只是css的显示隐藏,不会触发数据重置,可以保留数据
但又发现v-show并不会触发mounted里的计算,还需要加上v-if,最终是这样的
方法二:v-if和v-show一起使用
首先,初始step是0,步骤一和步骤二v-if都是false;
然后当step为1的时候,v-if为true,v-show为true,步骤一显示,且触发mounted里面的运算,获取数据,重置数据;
然后操作之后点击下一步,step为2,步骤一的v-if为true,v-show为false,步骤一的css隐藏,但是数据操作还是保留着,步骤二显示。
然后点击上一步,step为1,步骤二隐藏,步骤一的v-if还是true,v-show也是true,因为v-if一直都是true,所以不会触发mounted里面的运算,只是单纯的dom的显示隐藏,数据也保留着
对比两种方法,还是方法二好一些,简单实用