Vue中如何展示数组内对象的decorTypes数据？控制台显示DevTools不显示

你遇到的问题核心是没有将接口返回的数据正确赋值到响应式的tabs数组中，导致Vue DevTools无法追踪到数据变化。以下是具体解决步骤：

问题原因 #

1. 原代码仅在控制台打印了接口数据，但未将其赋值给tabs数组内的decorTypes属性
2. Vue 2对响应式更新有规则：直接修改数组元素的属性（如this.tabs[0].decorTypes = ...）可触发响应式，但如果是给已有对象新增未预定义的属性，需要用Vue.set确保响应式

修改后的代码 #

<script type="module">
import axios from 'axios'; // 确保项目中已引入axios

export default {
  data() {
    return {
      tabs: [{
        rate: "",
        selectedHouseType: "",
        decorTypes: {},
      }],
      tabCounter: 0,
      houseTypes: {},
    };
  },
  methods: {
    getHouseTypes() {
      axios.get("/api/houseTypes").then((response) => {
        this.houseTypes = response.data;
      });
    },
    getDecor() {
      // 先获取最后一个tab，简化后续代码
      const lastTab = this.tabs[this.tabs.length - 1];
      
      axios.get('/api/decorTypes', {
        params: {
          houseAreaTypeId: lastTab.selectedHouseType
        }
      }).then((response) => {
        console.log(response.data);
        // 将接口数据赋值给decorTypes，触发响应式更新
        lastTab.decorTypes = response.data;
        
        // 若需要避免原数据外部修改影响当前组件，可使用扩展运算符做浅克隆
        // lastTab.decorTypes = { ...response.data };
      });
    }
  },
}
</script>

额外注意事项 #

• 如果接口返回的response.data是数组，建议将decorTypes的初始值改为[]，更符合数据类型
• 若后续需要给decorTypes新增单个属性（而非替换整个对象），需使用this.$set(lastTab.decorTypes, '属性名', 属性值)来保证响应式，例如：

  this.$set(lastTab.decorTypes, 'newKey', response.data.newKey);
  

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