时间戳

首页 > 解决方案 > 5 步 vue.js 重构中的数据表单

vue.js - 5 步 vue.js 重构中的数据表单

问题描述

例如，我有一个 5 步表单（有时是 4 步），在一个步骤结束时，我的 div 将被折叠，下一个将打开以完成。

我的想法是为 vue.js 组件中的每个大 div 分配一个带有整数的 id 例如id = "step-1"

这不是最好的解决方案，我想问你如果不对这样的事情进行硬编码，你将如何进行？

忘记我的代码

JS

 changeStep(nextStepId) {
 const currentTab = document.getElementById(`step-${this.currentStep}`);

 currentTab.setAttribute("collapsed", true)
            
 this.currentStep = nextStepId;
            
 const nextTab = document.getElementById(`step-${nextStepId}`);

 nextTab.removeAttribute("collapsed", true)
 }

零件

<div class="step" id="step-1">

而这个step-id上升到5。还有我想从过去退一步的部分

 href="" 
 class="btn btn--secondary btn--sm" 
 @click.prevent="$emit('changeStep', 1)">
 view / edit

你认为我可以如何继续使这个功能更容易？

标签： vue.js

解决方案

推荐阅读