Vue.js中如何将array.length存入变量并修改以更新显示

我是Vue.js新手，在现有项目中修复Bug，已完成父子组件通信，需要实现点击按钮时修改存储array.length的变量。此前在props或data中声明变量未达预期，需求是将this.allRootItems.length存入变量，在calcDeduction()方法中增减，通过heading计算属性显示，当前代码无法实现。

相关代码片段：

data() {
    return {
      showItems: false,
      progress: 0,
      a: 0,
    };
},

computed: {
  ...
  heading() {
    var a = this.allRootItems.length;
    var text = this.section.heading + " (" + this.progress + "/" + a + ")";
    return text;
  },
  ...

  allRootItems() {
      var result = [];
      if (this.checklistid == null) {
        return result;
      }
      var rootItems = this.findRootItemsInStore({ query:{
        sectionId: this.section.id
      } }).data;
      for (var i=0; i<rootItems.length; i++) {
        var itemToDo = this.findCheckItemsInStore({ query:{
          checklistId: this.checklistid,
          rootitemId: rootItems[i].id
        } }).data[0];
        if (itemToDo) {
          if (itemToDo.isTodo) {
            result.push(rootItems[i]);
          }
        }
       }
      return result;
     },
  ...
},

methods: {
  ...
  calcDeduction(dedValue) {
      if (dedValue == -1) { //-1 and 1 are being swapped on each toggle of the button
        this.a--;
      }
      if (dedValue == 1) {
        this.a++;
      }
      console.log(this.a);
    }
  }

问题分析 #

当前代码核心问题：

1. heading计算属性直接引用this.allRootItems.length，未关联data中维护的变量a，导致calcDeduction修改a后无法同步到显示。
2. 变量a初始值为0，未同步allRootItems的初始长度，初始显示错误。

修复方案 #

1. 初始化变量a
   在组件mounted钩子中设置a的初始值，确保computed属性allRootItems已计算完成：

mounted() {
  this.a = this.allRootItems.length;
}

2. 修改heading计算属性
   将heading中直接使用this.allRootItems.length改为使用this.a，关联到可修改的变量：

heading() {
  return `${this.section.heading} (${this.progress}/${this.a})`;
}

3. 可选：监听allRootItems变化
   如果allRootItems长度会随后端数据更新变化，添加监听器自动同步a的值：

watch: {
  allRootItems(newItems) {
    this.a = newItems.length;
  }
}

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