我使用“保持活动”来维护Vue3中多步表单的状态,这样用户就可以根据需要来回导航。
但我想不出的是,怎么才能把缓存清除掉。当用户完成表单时,我给他们一个重新启动的选项,我现在清除表单提交对象并将用户返回到表单的第1页,但是保持活动是为了保持表单状态,所以复选框是预选的。是否有一个电话,我可以通过我的重置功能,以清除保持活着的缓存?理想情况下,只适用于某些表单步骤,而不是所有步骤。
发布于 2022-08-16 11:40:11
实际上,我最终使用了一种完全不同的方法,我想我会把它放在这里,以防它对其他人有用。
我在这里找到的:https://michaelnthiessen.com/force-re-render/
基本上,可以通过更改组件的键值来强制对其进行重置。这有一个额外的好处,允许您有选择地强制任意数量的子组件的重呈现。
在父母那里。
<PageOne :key="page_one_key">
<script>
export default {
...
data() {
return {
page_one_key: 0,
}
},
...
methods: {
myreset(){
this.page_one_key += 1;
}
}
}
</script>
如果这种方法有缺点,我很想知道,但它似乎是完美的-允许我的表单的后退/转发导航和缓存组件的选择性重置。
它也很容易实现。
发布于 2022-07-21 06:55:22
)没有清除keepAlive缓存的内置方法。
看起来表单还没有完全重新设置,但可能足以销毁封装在
您是在包装的组件上使用key="x"
吗?比如:
<KeepAlive>
<component key="x"/>
</KeepAlive >
重新设定键和重定向到第一页可能会有帮助。但我也想到了一个想法,也许你应该重新初始化表单initialData ex:
<script>
const initialState = () => {
return {
name: '',
surename: '',
location: {
name: null,
},
};
};
export default {
data() {
return initialState();
},
methods: {
reset() {
Object.assign(this.$data, initialState());
},
},
};
</script>
让我们深入到
https://learnvue.co/tutorials/vue-keep-alive
发现相关问题:
https://stackoverflow.com/a/71766767/10900851 https://github.com/vuejs/vue/issues/6259#issuecomment-436209870
https://stackoverflow.com/questions/73062432
复制相似问题