Nuxt JS 2中使用v-if后Calculator组件数据无法显示

核心问题原因 #

1. Vue2响应式检测边界问题：组件销毁重建后，直接修改formulas对象属性的操作未被Vue响应式系统正确捕捉，导致视图未同步更新（控制台能打印正确数据，但页面无变化）。
2. 事件监听未正确清理：mounted中使用匿名函数绑定单元格点击事件，clear方法无法匹配相同函数引用进行移除，组件重建后会重复绑定事件，可能引发数据异常。

解决方案 #

方案1：强制触发响应式更新（快速修复） #

使用Vue的$set方法显式更新formulas属性，确保响应式系统感知到变化：

calculateCells (val) {
  const total = val.map(Number).reduce((a, b) => a + b, 0)
  const sum = total.toFixed(2)
  const avg = val.length > 0 ? (total / val.length).toFixed(2) : 0
  const min = val.length > 0 ? Math.min(...val) : 0
  const max = val.length > 0 ? Math.max(...val) : 0
  const count = val.length

  this.$set(this.formulas, 'sum', sum)
  this.$set(this.formulas, 'avg', avg)
  this.$set(this.formulas, 'min', min)
  this.$set(this.formulas, 'max', max)
  this.$set(this.formulas, 'count', count)
}

方案2：拆分响应式属性（更稳定） #

将formulas对象拆分为独立的响应式属性，避免对象属性更新的响应式盲区：

1. 修改data定义：

data () {
  return {
    calculator: null,
    table: null,
    cells: null,
    cellValues: [],
    sum: 0,
    avg: 0,
    min: 0,
    max: 0,
    count: 0
  }
}

2. 更新模板引用：

<!-- 桌面端列表 -->
<li class="list-group-item">Sum: {{ sum }}</li>
<li class="list-group-item">Avg: {{ avg }}</li>
<li class="list-group-item">Min: {{ min }}</li>
<li class="list-group-item">Max: {{ max }}</li>
<li class="list-group-item">Count: {{ count }}</li>

<!-- 移动端下拉选 -->
<option>Sum: {{ sum }}</option>
<option>Avg: {{ avg }}</option>
<option>Min: {{ min }}</option>
<option>Max: {{ max }}</option>
<option>Count: {{ count }}</option>

3. 调整calculateCells和clear方法：

calculateCells (val) {
  const total = val.map(Number).reduce((a, b) => a + b, 0)
  this.sum = total.toFixed(2)
  this.avg = val.length > 0 ? (total / val.length).toFixed(2) : 0
  this.min = val.length > 0 ? Math.min(...val) : 0
  this.max = val.length > 0 ? Math.max(...val) : 0
  this.count = val.length
},

clear () {
  this.cellValues = []
  this.sum = 0
  this.avg = 0
  this.min = 0
  this.max = 0
  this.count = 0

  // ...其他清理逻辑
}

方案3：修复事件监听清理（必须执行） #

将匿名事件处理函数改为命名函数，确保组件销毁时能正确移除监听：

1. 添加命名事件处理方法：

methods: {
  handleCellClick (event) {
    this.getCellValue(event.target)
  },
  // ...其他已有方法
}

2. 更新mounted中的绑定逻辑：

mounted () {
  this.initCalculator()

  for (const cell of this.cells) {
    cell.addEventListener('click', this.handleCellClick)
  }
}

3. 修正clear方法中的移除逻辑：

clear () {
  // ...其他清理逻辑
  for (const cell of this.cells) {
    cell.classList.remove('highlight-cell')
    cell.removeEventListener('click', this.handleCellClick)
  }
}

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