Vue.js中表单级联显示功能实现求助

我来帮你搞定这个需求，其实不用额外维护一堆布尔变量，完全可以通过现有jobs数组的状态来控制每组的显示隐藏，完美契合Vue数据驱动的思路，不用手动操作DOM。

核心思路 #

• 第一组表单始终显示；
• 从第二组开始，只有前面所有组的jobName都不为空时才显示；
• 当某组的jobName被清空，后面所有组的显示条件会自动不满足，从而隐藏。

修改后的代码示例 #

<template>
  <div id="app">
    <div v-for="(job, index) in jobs" :key="index" v-if="shouldShowGroup(index)">
      <input 
        v-model="job.jobName" 
        placeholder="Job Name"
        type="text"
      >
      <input 
        v-model="job.jobDesc" 
        placeholder="Job Description"
        type="text"
      >
    </div>
  </div>
</template>

<script>
new Vue({
  el: "#app",
  data() {
    return {
      jobs: [
        { jobName: '', jobDesc: '' },
        { jobName: '', jobDesc: '' },
        { jobName: '', jobDesc: '' },
        { jobName: '', jobDesc: '' }
      ]
    }
  },
  methods: {
    shouldShowGroup(index) {
      // 第一组直接显示
      if (index === 0) return true;
      // 检查前面所有组的jobName是否都不为空（去掉前后空格后）
      return this.jobs.slice(0, index).every(item => item.jobName.trim());
    }
  }
})
</script>

代码解释 #

1. shouldShowGroup方法：专门用来判断每组是否应该显示，把判断逻辑抽成方法更清晰易维护；
2. slice(0, index).every(...)：slice(0, index)会获取当前组之前的所有表单项，every方法检查这些项的jobName去掉前后空格后是否都不为空——只要前面有一组没填内容，当前及后续组就不会显示；
3. 响应式更新：当你修改某组的jobName时，Vue会自动触发shouldShowGroup的重新计算，从而自动更新对应组的显示状态，全程不用手动操作DOM。

这样就完美实现了你要的效果：页面加载只显示第一组，填完当前组才显示下一组，清空某组后后续组自动隐藏。

内容的提问来源于stack exchange，提问作者Hawkes