Vue状态变量不更新：调用selectCategory后product.categories未在DevTools中更新

看起来你遇到了Vue响应式更新在开发者工具中不生效的问题，我来帮你一步步排查和解决：

第一步：确认方法是否真的被调用 #

首先先排除最基础的问题——你的selectCategory方法是不是真的执行了？可以在方法里加个日志输出验证：

selectCategory(event, id){
  this.product.categories.push(id);
  console.log('当前categories:', this.product.categories); // 新增这行日志
}

点击列表项后查看浏览器控制台：

• 如果能输出更新后的数组，说明数组确实被修改了，问题出在响应式触发或开发者工具显示上；
• 如果没输出，那可能是点击事件绑定异常，检查下v-on:click是否写错（@click是简写形式，和v-on:click等效），或者category.id是否存在有效值。

第二步：强制触发响应式更新 #

虽然Vue 2原生支持push这类数组变更方法触发响应式，但嵌套对象中的数组偶尔会有显示延迟的情况，你可以试试重新赋值数组的方式，强制让Vue监听到变化：

selectCategory(event, id){
  // 用扩展运算符创建新数组，替换原数组引用
  this.product.categories = [...this.product.categories, id];
}

这种方式会直接更新数组的引用，确保响应式系统能立刻捕获到变化，开发者工具也会同步显示最新状态。

如果你的Vue版本是2.x，也可以用Vue.set来操作（针对数组的索引赋值场景，和push效果一致）：

// 单文件组件需要先导入Vue
import Vue from 'vue';

selectCategory(event, id){
  Vue.set(this.product.categories, this.product.categories.length, id);
}

第三步：排查开发者工具本身的问题 #

有时候开发者工具会出现缓存或版本兼容问题，你可以试试：

• 关闭并重新打开Vue开发者工具面板；
• 刷新页面后重新测试；
• 确保你的Vue开发者工具版本和项目中Vue版本匹配（Vue 2对应旧版开发者工具，Vue 3对应新版）。

补充：你的初始化代码是没问题的 #

你当前的data初始化逻辑是正确的：

data () {
  return {
    product: { categories: [] },
  }
}

因为你已经明确初始化了categories数组，Vue会自动将其转化为响应式对象，这部分不需要修改。

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