Vue中array.push生成嵌套数组导致数据无法渲染的问题咨询

解决方案 #

1. 修复当前代码的直接方案 #

问题根源是接口返回的是数组而非单个对象，执行push(finalRes)会把整个数组作为元素加入，形成嵌套结构。只需提取数组中的目标对象再添加：

修改fetchComputer方法：

async fetchComputer(productId) {
  const res = await fetch('http://localhost:5030/api/Products/CompareProducts/' + productId);
  const finalRes = await res.json();
  
  // 方案1：取返回数组的第一个元素（适用于接口每次仅返回单个产品的场景）
  this.list_of_computers.push(finalRes[0]);
  
  // 方案2：如果接口可能返回多个产品，用扩展运算符展开添加
  // this.list_of_computers.push(...finalRes);
}

修改后，list_of_computers会变成扁平数组：[{"id":1,...}, {"id":2,...}]，v-for即可正常渲染compareThis.brand。

2. 替代array.push的方法 #

以下方法均能实现数组元素添加，且保持Vue响应式：

• 扩展运算符重新赋值：创建新数组替换原数组，适合需要保留原数组引用的场景

  this.list_of_computers = [...this.list_of_computers, finalRes[0]];
  

• Array.concat：返回新数组，不修改原数组，适合纯函数式操作

  this.list_of_computers = this.list_of_computers.concat(finalRes[0]);
  

• Array.splice：直接修改原数组，可灵活控制插入位置

  // 在数组末尾添加元素
  this.list_of_computers.splice(this.list_of_computers.length, 0, finalRes[0]);
  

• Vue3 ref语法：若使用Vue3组合式API，直接修改ref的value属性

  const list_of_computers = ref([]);
  list_of_computers.value.push(finalRes[0]);
  

3. 其他优化实现思路 #

批量请求优化

用Promise.all一次性请求多个产品数据，减少异步请求次数，避免多次修改数组：

mounted() {
  this.fetchAllComputers([1, 2]);
},
methods: {
  async fetchAllComputers(productIds) {
    // 批量生成请求Promise
    const requestPromises = productIds.map(id => 
      fetch(`http://localhost:5030/api/Products/CompareProducts/${id}`)
        .then(res => res.json())
        .then(data => data[0]) // 提取单个产品对象
    );
    // 等待所有请求完成，直接赋值给数组
    this.list_of_computers = await Promise.all(requestPromises);
  }
}

优化对比表格结构

原表格结构仅展示品牌列表，不符合对比需求。建议改为参数行+产品列的结构，更直观：

<main class="modal__main_CompareItem">
  <table>
    <thead>
      <tr>
        <th>参数项</th>
        <!-- 动态生成产品列 -->
        <th v-for="(item, idx) in list_of_computers" :key="idx">{{item.brand}}</th>
      </tr>
    </thead>
    <tbody>
      <!-- 品牌参数行 -->
      <tr>
        <td>品牌</td>
        <td v-for="(item, idx) in list_of_computers" :key="idx">{{item.brand}}</td>
      </tr>
      <!-- 产品ID参数行 -->
      <tr>
        <td>产品ID</td>
        <td v-for="(item, idx) in list_of_computers" :key="idx">{{item.productId}}</td>
      </tr>
      <!-- 可扩展更多参数行 -->
    </tbody>
  </table>
</main>

用Axios简化请求逻辑

已导入Axios但未使用，替换fetch可简化异步代码：

async fetchComputer(productId) {
  // Axios自动解析JSON，无需手动处理res.json()
  const { data } = await axios.get(`http://localhost:5030/api/Products/CompareProducts/${productId}`);
  this.list_of_computers.push(data[0]);
}

数据去重处理

避免重复添加同一产品，可在添加前检查：

const targetProduct = finalRes[0];
if (!this.list_of_computers.some(item => item.productId === targetProduct.productId)) {
  this.list_of_computers.push(targetProduct);
}

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