Vue中v-if控制显隐的可见元素连续自动计数实现问题

实现方案 #

核心逻辑是利用v-if为false时内部表达式不会执行的特性，配合渲染前重置的全局计数器实现序号自动计算，不用额外修改现有dom结构，完全符合你要的getNum()调用形式。

Vue2 实现代码 #

export default {
  data() {
    return {
      // 序号计数器
      numCounter: 0,
      // 你的其他题目显隐控制变量
      someCondition: false
    }
  },
  beforeMount() {
    // 首次渲染前重置计数器
    this.numCounter = 0
  },
  beforeUpdate() {
    // 每次组件更新（比如条件变化触发显隐切换）前重置计数器
    this.numCounter = 0
  },
  methods: {
    getNum() {
      return ++this.numCounter
    }
  }
}

Vue3 setup 实现代码 #

import { ref, onBeforeMount, onBeforeUpdate } from 'vue'

export default {
  setup() {
    const numCounter = ref(0)
    const someCondition = ref(false)

    const resetCounter = () => {
      numCounter.value = 0
    }

    const getNum = () => {
      return ++numCounter.value
    }

    // 首次渲染前重置
    onBeforeMount(resetCounter)
    // 组件更新前重置
    onBeforeUpdate(resetCounter)

    return {
      someCondition,
      getNum
    }
  }
}

模板使用方式和你预期完全一致 #

<template>
  <div class="el">
    <div class="el__qty">{{getNum()}}</div>
    <!-- 题目1内容 -->
  </div>
  <div class="el" v-if="someCondition">
    <div class="el__qty">{{getNum()}}</div>
    <!-- 题目2内容，显隐随someCondition变化 -->
  </div>
  <div class="el">
    <div class="el__qty">{{getNum()}}</div>
    <!-- 题目3内容 -->
  </div>
</template>

注意事项 #

• getNum()仅在题目序号位置调用即可，不要在模板其他无关位置调用，避免打乱计数顺序
• 所有题目区块在模板中的书写顺序就是序号的排序依据，符合常规问卷的设计逻辑
• 如果需要分级序号（比如1.1、1.2），只需要额外新增对应的分级计数器，子题位置调用对应分级的计数方法即可

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